A reveal hover effect with a single element

April 27, 2023

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.

More CSS Tips

An inner border-radius with one property Use a magic border-image trick to create an inner border-radius. May 03, 2023
Select all elemens between two class names A simple selector to select all the elements between two given classes. May 02, 2023
A CSS-only Ribbon A simple code to create a fancy CSS Ribbon. April 24, 2023
A CSS-only 3D Zig-Zag edge A simple code to create a cool Zig-Zag edge with a 3D effect. April 19, 2023