Skip to main content

3D shine effect on hover

Add a 3D effect to your image with a shiny animation on hover ✨

A 3D shine effect on image

img {
--a: 8deg; /* control the angle of rotation (the smaller, the better) */
aspect-ratio: 1;
transform: perspective(400px) rotate3d(var(--i,1,-1),0,var(--a));
linear-gradient(135deg,#000c 40%,#000,#000c 60%)
100% 100%/240% 240%;
transition: .4s;
img:hover {
mask-position: 0 0;

See the Pen 3D Shine effect on hover by Temani Afif (@t_afif) on CodePen.

More detail: