Compatibility: Supported by all modern browsers except Edge. Limited support in IE10/11 and Edge using url() only.
Clip-path Example
To crop an image, apply the clip-path: inset() property. Here's a demonstration where a 120-pixel box is reduced to 0 on hover.
.reveal {
background: url(https://i.sstatic.net/3v1Kz.jpg) no-repeat;
background-size: 150px;
background-position: center;
height: 300px;
width: 300px;
clip-path: inset(120px 120px 120px 120px);
transition: clip-path 0.5s;
}
.reveal:hover {
clip-path: inset(0 0 0 0);
}
/*for example*/
body {
background: linear-gradient(to bottom right, black 0%, white 100%);
height: 100vh;
}
<div class="reveal"></div>
Using url() (not working in Edge or IE)
An attempt was made!
Create an SVG like this:
<svg>
<clipPath id="square">
<rect />
</clipPath>
</svg>
Add the SVG to the container. The div is assigned clip-path: url(#square), with width, height, x, and y coordinates specified in the CSS and adjusted on hover.
.reveal-url {
background: url(https://www.pngfind.com/pngs/m/299-2991041_memes-para-stickers-png-png-download-surprised-pikachu.png)
no-repeat;
background-size: 150px;
background-position: center;
height: 300px;
width: 300px;
clip-path: url(#square);
position: relative;
}
svg {
width: 100%;
height: 100%;
}
.reveal-url rect {
transition: all 0.5s;
x: 120px;
y: 120px;
width: 60px;
height: 60px;
}
.reveal-url:hover rect {
width: 100%;
height: 100%;
x: 0;
y: 0;
}
/*for example*/
body {
background: linear-gradient(to bottom right, black 0%, white 100%);
height: 100vh;
}
h1 {
font-size: 30px;
color: white;
}
<h1>This method works only in Chrome and Firefox.</h1>
<div class="reveal-url">
<svg>
<clipPath id="square">
<rect />
</clipPath>
</svg>
</div>
#2 – Using Box-shadow
If dealing with solid background colors, one simple technique is to employ inset box-shadow to mask the container contents and then decrease the box shadow on hover.
.reveal {
background: #000 url(https://www.pngfind.com/pngs/m/299-2991041_memes-para-stickers-png-png-download-surprised-pikachu.png) no-repeat;
background-size: 150px;
background-position: center;
height: 300px;
width: 300px;
box-shadow: inset 0 0 0 120px #000;
transition: box-shadow 1s;
}
.reveal:hover {
box-shadow: inset 0 0 0 70px #000;
}
/*for example*/
body {
background: #000;
}
<div class="reveal"></div>