Skip to main content
CSS Tip

A reveal hover effect with a single element

Add a simple reveal animation to your images using a few lines of code

img {
--s: 200px; /* the image size */

width: var(--s);
height: var(--s);
box-sizing: border-box;
object-fit: cover;
cursor: pointer;
transition: .5s;
}
img.left {
object-position: right;
padding-left: var(--s);
background: #542437; /* the overlay color */
}
/* similar code for the other directions */

img:hover {
padding: 0;
}

See the Pen A reveal hover effect with one element by Temani Afif (@t_afif) on CodePen.

Related Article: www.sitepoint.com/css-image-reveal-animation


More CSS Tips