CSS Tip

Sliding reveal animation for your images

Add a reveal effect to your image with a sliding animation on hover

Sliding reveal animation

img {
  --s: 200px; /* the size of the image */
  
  width: var(--s);
  aspect-ratio: 1;
  box-sizing: border-box;
  object-fit: cover; 
  /* 8px = thickness  13px = gap (5px) + thickness (8px) */
  border-image: linear-gradient(#53777A 0 0) 1/8px/13px;
  object-position: top;
  padding-top: calc(2*var(--s)/3);
  transition: .5s;
}
img:hover {
  padding: 0;
}

See the Pen Sliding reveal hover effect by Temani Afif (@t_afif) on CodePen.

More CSS Tips