Clip an image to another image

user_18799034 0
Viewed 34

I have been trying to do this window-parallax view effect for my landing page. I have got till here, but I don't know how to clip the image onto the 2nd image. I'm using bootstrap as well The windows

<img class="img-fluid center-img" src="img/windowfilled.png" width="512x" height="512x">
<img class="img-fluid center-img" src="img/window.png" width="512x" height="512x">

.center-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    margin-top: -250px; /* Half the height */
    margin-left: -250px; /* Half the width */
}

window is the foreground, and window-filled is the background. I want the result to be like this (Photoshop example) Expected output

css html
1 Answers

place image inside then use border

border: 1px;
  border-top-left-radius:20px;
  border-top-left-radius:20px;

Px just for example

user_192425380
Related