Positionnement en CSS : Galerie d’images CSS06

Cet exercice consiste a créer une galerie d’images pas à pas.

Consignes de l’exercice

Téléchargez la totalité des fichiers de travail (.html, .css et images) afin de réaliser l’exercice.

La première étape est de configurer la couleur d’arrière-plan de la page et la police par défaut.

Positionnez les éléments de la galerie. Les conteneurs des images div doivent être positionnés pour s’afficher côte à côte. Observez bien le code HTML pour trouver le sélecteur CSS adapté.

Positionnement les titres sur les images. Pour cela, positionnez les éléments de paragraphe afin qu’ils se retrouvent par dessus les images.

Mettez en forme les étiquettes, elles sont mises sur un fond avec une opacité de 60%.

Mettez en forme des vignettes de la galerie. Le trait gris visible sur la partie zoomée est une bordure. Ce trait blanc peut être obtenue soit avec une bordure, soit avec une marge.

Ajoutez des icônes. En utilisant les éléments inline span, ajoutez une icône en haut à droite des vignettes. L’icône est fournie dans l’archive. Tout doit être fait en CSS, il n’y a aucune modification à apporter au HTML. Utilisez la propriété background pour mettre l’image dans le span.

Ajout des effets au survol, au passage de la souris sur les div, les bordures doivent changer de couleur et les éléments p doivent être masqués.

Correction

Les fichiers de correction sont téléchargeables ci-dessous :

Sauf mention contraire*, l'article Positionnement en CSS : Galerie d’images [CSS06] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

1 réaction sur “ Positionnement en CSS : Galerie d’images [CSS06] ”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.