CSS Tip

Overlay reveal animation for your images

Add a reveal animation to your image with a simple code

CSS-only overlay reveal animation

@property --h { 
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
@property --e { 
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

img {
  --w: 200px; /* image size */
  --b: 12px;  /* control the overlay size (it will be w + b)*/
  --g: 15px;  /* the gap between the overlay and the image on hover */
  --c: #F56991;
  
  width: var(--w);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: right;
  padding-inline: clamp(0px,var(--h),var(--w)) 0;
  box-sizing: border-box;
  background: var(--c);
  box-shadow: calc(var(--h) - var(--w) - var(--b) + var(--e)) 0 0 var(--b) var(--c);
  --h: calc(var(--w) + var(--b));
  --e: 0px;
  transition: --h .3s .3s linear,--e .3s linear;
}
img:hover {
  --h: calc(-1*var(--g));
  --e: calc(var(--w) + var(--b) + var(--g));
  transition: --h .4s linear,--e .3s .4s;
}

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

Another version with a simpler animation

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

More CSS Tips