CSS Tip

A circular reveal effect for your images

Add a fancy reveal effect to your images with a few lines of code

CSS-only reveal effect on hover

@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

img {
  --w: 200px; /* image width*/
  --b: 10px; /* border thickness */
  --g: 5px; /* the gap */
  --c: #5E8C6A;
  
  width: var(--w);
  padding: calc(1.5*var(--w));
  margin: calc(var(--b) + var(--g) - 1.5*var(--w));
  border-radius: 50%;
  --_p:calc(var(--w)/2 + var(--g) + var(--b)) 
    at calc(50% + 25%*cos(var(--a))) calc(75% - 25%*sin(var(--a)));
  background: radial-gradient(var(--_p),
      #0000    calc(100% - var(--b) - 1px),
      var(--c) calc(100%  - var(--b)));
  transform-origin: 50% 75%;
  rotate: calc(var(--a) - 90deg);
  clip-path: circle(var(--_p));
  transition: --a .5s;
}
img:hover {
  --a: 90deg;
}

See the Pen Circular reveal hover effect by Temani Afif (@t_afif) on CodePen.

More CSS Tips