Reveal an image with smart padding

Published at

Updated at

Reading time
2min

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.

HTML
CSS

Preview

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!

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 4 days ago.
Stefan standing in the park in front of a green background

Related Topics

Related Articles