Skip to main content

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: