Skip to main content

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);
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.