CSS Tip

A reveal hover effect with an expanding circle

Add a reveal animation to your image with a simple and nice hover effect

A reveal hover effect with an expanding circle

img {
  --s: 300px; /* size of the image*/
  
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  margin: calc(-.14*var(--s));
  outline: var(--s) solid #FFC48C;
  outline-offset: calc(var(--s)/-2);
  clip-path: inset(14.65% round 20px);
  transition: .7s;
}
img:hover {
  outline-offset: 0;
}

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

More detail: verpex.com/blog/website-tips/css-effects-on-images-ii