#nav10d a,#nav11d a,#nav20d a,#nav21d a{
position:relative;
display:inline-block;
overflow:hidden;
}
/* IMAGE BASE */
#nav10d img,#nav11d img,#nav20d img,#nav21d img{
transition:.3s ease;
}
/* SHINE EFFECT */
#nav10d a::after,#nav11d a::after,#nav20d a::after,#nav21d a::after{
content:"";
position:absolute;
top:0;
left:-75%;
width:50%;
height:100%;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.9) 50%,
rgba(255,255,255,0) 100%
);
transform:skewX(-25deg);
}
#nav10d a:hover::after,#nav11d a:hover::after,#nav20d a:hover::after,#nav21d a:hover::after{
animation:shine .7s ease;
}
/* IMAGE HOVER EFFECT */
#nav10d a:hover img,#nav11d a:hover img,#nav20d a:hover img,#nav21d a:hover img{
transform:scale(1.08);
box-shadow:0 0 20px rgba(255,255,255,.8),0 0 40px rgba(255,255,255,.6);
filter:brightness(1.3);
}
/* COMBINED ANIMATION */
#nav10d a:hover,#nav11d a:hover,#nav20d a:hover,#nav21d a:hover{
animation:pulseFloat .6s ease-in-out infinite;
}
/* SHINE KEYFRAME */
@keyframes shine{
100%{ left:125%; }
}
/* MAIN EFFECT */
@keyframes pulseFloat{
0%{
transform:scale(1) translateY(0);
}
50%{
transform:scale(1.06) translateY(-6px);
}
100%{
transform:scale(1.03) translateY(0);
}
}
