Chargement…
Image Rollover CSS Tutoriel

CSS – Rollover Effet Sur Image



La plupart utilise Javascript pour créer un css effet Rollover sur des images mais cela est vraiment pas bien pour pleins de raisons liées aux navigateurs. Dans ce tutoriel je vais vous montrez comment créer des css effets Rollover en utilisant juste le CSS.

Avant de commencer notre tutoriel, voici un exemple de l’ancienne méthode utiliser par Javascript :

L’utilisation de cette méthode ne fait aucun effet à l’image ou bien il met trop de temps ce qui rend le site très long et le design amateur et pas professionnel à mon avis.

La CSS méthode est plus facile et donne notre effet rollover plus rapidement, parce qu’il utilise ce qu’en appel « Image Sprite » cela veux dire l’utilisation de deux images similaire, une coller à l’autre puis on applique la transition pour avoir l’effet Rollover.

images-sprite-css

Maintenant on va ajouter notre code :

CSS Code :

HTML Code :

Il faut juste noter :

– Les valeurs Width et Height dans a.rollover sont la taille de l’image originale.
– La valeur de background-position est celle de la largeur de l’image originale – puisque nous sommes littéralement en train de passer une partie de la sprite d’image à l’autre.
– Nous avons inclus un tag avec un texte alternatif à l’image et déplacer le sur le côté de l’écran visible afin que les lecteurs d’écran vont le lire et en cas d’absence de soutien CSS un lien texte sera affiché à la place.

Pour une demo directe, regardez la navigation sur le site d’Apple. Pour plus d’effets sur Images, regardez ici : W3Schools



Laisser un commentaire