How to create an image clipping effect in CSS.

CSS transformations can be used to create engaging transition effects. One cool trick is to apply a transformation to an element, and reverse the (inherited) transformation on the child.

Let's look at an example! Here's the HTML structure:

<div class="wrapper">
  <figure class="figure">
    <img class="img" src="img/img.jpg" alt="Car in desert">
  </figure>
</div>

In CSS, on hover we apply a scale down transformation to the <figure> element and a scale up transformation to the <img> element:

.wrapper:hover .figure {
  transform: scale(0.9);
}

.wrapper:hover .img {
  transform: scale(1.111);
}

To <img> scale value is obtained by diving 1 by the scale down value (1/0.9).

Here's a live demo: