Skip to main content
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