Reveal an image with smart padding

Here's Temani Afif once again doing what he does best: creating wild single-element tricks. What's on this time?

The preview below shows the article's result, which is two image elements.

The img elements are displayed as 3D boxes and only reveal their image content when hovering. There are no div wrappers or anything — what you see above are two img elements.

Temani walks you through how to create this effect step by step; go check it out. It's a great read.

But one thing stood out in the article: you might think that the images hide and show with some wild CSS tricks, but the effect uses good ol' padding-right.

Here's a minimal example.

<img src="https://images.ctfassets.net/f20lfrunubsq/6pxi4fjpvwBgYQJbqhGoAU/69ccb9328d1938f6a509b12cef02ef2c/computer-cat.webp" width="150" height="150" alt=""A comic character at a screen">
<img src="https://images.ctfassets.net/f20lfrunubsq/6pxi4fjpvwBgYQJbqhGoAU/69ccb9328d1938f6a509b12cef02ef2c/computer-cat.webp" width="150" height="150" alt=""A comic character at a screen">

img {
  width: 150px;
  aspect-ratio: 1;
  display: block;
  padding-right: 150px;
  transition: padding 0.5s ease-in;
  object-fit: cover;
  object-position: left;
 
  &:hover {
    padding-right: 0;
  }
}
img {
  width: 150px;
  aspect-ratio: 1;
  display: block;
  padding-right: 150px;
  transition: padding 0.5s ease-in;
  object-fit: cover;
  object-position: left;
 
  &:hover {
    padding-right: 0;
  }
}

By applying full-width padding to the image, the actual image is "pushed out" of the container. The applied object-fit: cover then prevents the image from being squished. And as the cherry on top: if you change object-position from left to right, the revealing effect becomes a "slide in". Go and try it above!

I don't know when and if I'll use this effect, but it's more than worth a snippet entry on this blog. Thank you, Temani!