A reveal hover effect with a single element

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

• No extra element (only the <img> tag)
• No pseudo-element
• Less than 10 CSS declarations
• Powered by object-fit and object-position
• Easily control the reveal direction

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

• Previous CSS Tip
• Next CSS Tip