Go to homepage

Projects /

November 9, 2022

Image Clipping Effect

By CodyHouse
404 HTML, CSS, JS components. Download →

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">

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:

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.