Skip to main content
CSS Tip

A reveal hover effect using CSS mask III

Add a nice reveal animation to your image with a few lines of code

A reveal hover effect using mask & @property

@property --p {
syntax: "<percentage>";
initial-value: 0%;
inherits: false;
}

img {
--b: 10px; /* border thickness */
--g: 8px; /* the gap */

border: var(--b) solid #0000;
padding: var(--g);
border-radius: 50%;
background:
repeating-conic-gradient(#F7E4BE 0 9deg,#7A6A53 10deg 18deg) /* the border coloration */
border-box;
--m:linear-gradient(#000 0 0);
mask:
var(--m),var(--m) padding-box,
conic-gradient(#000 var(--p,0%),#0000 0) content-box;
mask-composite: exclude;
transition: --p .5s;
}
img:hover {
--p: 100%;
}

See the Pen Hover Reveal Animation by Temani Afif (@t_afif) on CodePen.


More CSS Tips