Chargement…

Créer Un Effet Zoom Sur Une Photo



Dans l’exemple précédent on vous a montrer comment créer un effet cercle sur une image. Aujourd’hui on va créer un effet zoom sur une photo en utilisant seulement du CSS. L’animation se déroulera au passage de la souris sur la photo comme suit : un effet HOVER au passage de la souris qui déclenche automatiquement un effet zoom.

Zoom Sur Une Photo

Pour commencer notre tutoriel, créez un dossier « Effet-Zoom » et ajoutez ses fichiers dedans :

dossier et fichiers animation

Notre code HTML

Ajoutez ce code dans le fichier index.html :

Cette fois-ci dans notre animation, l’effet Zoom s’effectuera on utilisant une transition 2s (deux seconde) pour avoir un Zoom assez long sur une image (200x200px). Pour le passage de la souris (HOVER), on ajoute 100px pour avoir une illusion de zoom avec un effet Shadow (Ombre) blanc.

Notre Feuille de Style CSS

Voila, c’est Facile Non!

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire