Hover Shine
Hover to triggerA diagonal highlight sweeps across — a staple for buttons and cards.
Move the pointer over the box
Triggered by
:hover and never auto-plays on load. Move the pointer in and out to watch it again.
Tune parameters
Interactive animations are driven by pointer state; duration and easing live on
transition / animation — change the numbers in the code below.
Full code
/* Hover Shine */
.anim-hover-shine {
position: relative;
overflow: hidden;
}
.anim-hover-shine::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
transform: translateX(-120%) skewX(-20deg);
transition: transform .6s ease;
pointer-events: none;
}
.anim-hover-shine:hover::after {
transform: translateX(120%) skewX(-20deg);
}