CSS transformations can be used to create engaging transition effects. With some trickery we are able to apply a transformation to an element, and reverse the inherited transformation on the child.
Here’s the HTML structure as an example:
<div class="img-clip">
<a class="img-clip__link" href="#0">
<figure class="img-clip__fig">
<img class="img-clip__img" src="[image]" alt="[alt]">
</figure>
</a>
</div>
In CSS, on hover, we can apply a scale down transformation to the <figure>
element and a scale up transformation to the <img>
element:
.img-clip__link:hover .img-clip__fig {
transform: scale(0.9);
}
/* 1 divided by 0.9 = 1.111 */
.img-clip__link:hover .img-clip__img {
transform: scale(1.111);
}
The <img>
scale value is obtained by dividing 1 by the scale down value (1/0.9).