Skip to main content

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.