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