CSS Tip

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;
  mask:
    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.

More CSS Tips