Create captivating image clipping effects using CSS

Tags

  • CSS
  • HTML
Posted on
16 September 2024
Posted in
Tutorial

Share this article on

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).

Preview for “Create captivating image clipping effects using CSS”

HTML for “Create captivating image clipping effects using CSS”

<div class="img-clip">
  <a class="img-clip__link" href="#0">
    <span class="img-clip__caption">Hover me!</span>
    <figure class="img-clip__fig">
      <img class="img-clip__img" src="/assets/images/demo/image-clipping-demo.png" alt="">
    </figure>
  </a>
</div>

CSS for “Create captivating image clipping effects using CSS”

.img-clip {
  max-width: 640px;
}

.img-clip__fig,
.img-clip__img {
  transition: transform .3s;
  will-change: transform;
}

.img-clip__img {
  display: block;
  width: 100%;
}

.img-clip__fig {
  overflow: hidden;
}

.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);
}