CSS Tip

A reveal hover effect using CSS mask

Reveal your images with a nice hover effect and a few lines of code

A reveal hover effect using mask

img {
  padding: 10px; /* control the space for the gradient */
  background: repeating-linear-gradient(45deg,#FF6B6B 0 10px,#4ECDC4 0 20px);
  mask:
    radial-gradient(#000 70%,#0000 71%) content-box
    50%/var(--_s,150% 150%) no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: .5s;
  cursor: pointer;
}
img:hover {
  --_s: 0% 0%;
}

See the Pen Hover reveal animation using mask by Temani Afif (@t_afif) on CodePen.

More Detail: www.smashingmagazine.com/2023/09/revealing-images-css-mask-animations

More CSS Tips