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.

Afficher un indice

Indice :

Quel est l’élément HTML qui contient tous les autres ?

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é.

Afficher un indice

Indice :

Vous devez modifier les éléments div qui se trouvent dans l’élément avec l’id galerie.

Afficher un indice

Indice :

Une fois le bon sélecteur trouvé, vous pouvez utiliser du positionnement flottant ou une flexbox.

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

Afficher un indice

Indice :

Un élément positionné en absolu sera positionné par rapport à son ancêtre le plus proche qui a été positionné…

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

Afficher un indice

Indice :

Il existe plusieurs méthodes pour coder les couleurs en CSS : hexadécimal, rgb et rbga.

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 e-mail 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.