Cette animation se verra uniquement sur ordinateur et pas sur les appareils mobiles puisque fonctionnant au survol.
Elle pourra servir par exemple au survol de cards que vous avez sur votre site : un fond viendra suivre, suivant la cards que vous survolez, donnant une impression de suivi de la souris puisque ce fond glissera derrière vos cards. Le tout est fait en CSS sans JavaScript.
Pour cela il faudra créer dans une DIV parent, 4 cards plus une DIV qui servira au fond glissant.
les 4 cards auront la même classe .sld-ctn et la DIV supplémentaire la classe .box-slide.
- la DIV parent devra être en position relative,
- les 4 cards auront ici une largeur de 300px et hauteur de 400px, un z-index de 1 et
- la DIV supplémentaire aura la même taille des que les autres cards (ici 300px X 400px) mais aussi une position absolue.
En plus voici le code pour faire marcher le tout: si vous voulez 3 ou 5 cards il suffit de modifier le code en conséquence, ici 4 lignes (+1) et les 100% sont divisés par 4. Par exemple, pour 3 cards => 3 lignes (+1) et 100% sont divisés par 3 donc 0% / 33% / 66%, la ligne nth:child(4) pourra donc être effacée.
.sld-ctn:nth-child(1):hover ~ .box-slide {
left: 0%;
}
.sld-ctn:nth-child(2):hover ~ .box-slide {
left: 25%;
}
.sld-ctn:nth-child(3):hover ~ .box-slide {
left: 50%;
}
.sld-ctn:nth-child(4):hover ~ .box-slide {
left: 75%;
}
.sld-ctn:nth-child(n):hover ~ .box-slide {
background: var(--primary);
transition: all .4s linear;
}Voilà le résultat :