Skip to main content

A fancy hover effect with rotating squares

Add a fancy hover effect to your image with a small code. Transform your image into little rotating squares!

Pay attention to the support of the @property.

Image with rotating squares

img {
--n: 5; /* number of squares */

--_g: #0000 var(--d,0%),#000 0;
linear-gradient(calc( 0deg + var(--r,0deg)),var(--_g)),
linear-gradient(calc( 90deg + var(--r,0deg)),var(--_g)),
linear-gradient(calc(-90deg + var(--r,0deg)),var(--_g)),
linear-gradient(calc(180deg + var(--r,0deg)),var(--_g));
mask-size: calc(100%/var(--n)) calc(100%/var(--n));
mask-composite: intesect;
outline: 100vmax solid #0009;
outline-offset: -100vmax;
transition: outline-color .5s;
cursor: pointer;
img:hover {
--d: 0.1%;
--r: 90deg;
outline-color: #0000;
transition: outline-color .3s .2s, --d .5s cubic-bezier(0,450,1,450),--r .5s linear;

See the Pen A fancy CSS-only hover effect by Temani Afif (@t_afif) on CodePen.