Chargement…

Galerie Photos En CSS3 Avec Effet Hover



Dans ce tutoriel on va créer une galerie photos en css3 avec effet hover qui affiche des informations sur l’image au passage de la souris. Cette galerie aura un style Grid sous forme de colonnes et des images sous forme de vignettes (Thumbnails).

Galerie Photos En CSS3

Galerie Photos En CSS3 et HTML5

Pour commencer, créez un dossier « ma-galerie » par exemple, puis avec Notepad++ créez dedans, deux fichier : index.html et style.css et un autre dossier « images ».

fichier galerie css3 html5

Notre HTML

Pour chaque DIV Container On ajoute Deux éléments : Une liste (UL) qui inclue les vignettes (thumbnails) et une div avec class Meta qui inclue le contenu qui s’affichera au passage de la souris.

Ouvrez index.html et collez ce code :

Notre CSS

Ouvrez style.css et collez ce code :

Vous pouvez télécharger le code source de cette galerie ou bien ajouter vos propres images et modifier le code HTML.

Télécharger Code Source

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