Réalisons une galerie d’images en CSS avec la pseudo-class :target

Zoom sur une pseudo-class apparu avec le CSS 3, :target. Elle permet de modifier les styles d’un élément ciblé, vous l’avez peut-être déjà aperçu dans Wikipédia lorsque vous cliquez sur ancre, le texte auquel vous êtes reportés dans les page est surligné.

Pour cet exercice très simple, nous allons réaliser une petite galerie, c’est à dire une liste d’images, et un espace où elles apparaissent quand on clique dessus.

Déjà un aperçu du résultat : Démonstration
Et voici le pack HTML/CSS cadeau : Téléchargez

Ici, nous allons remplacer les images par des blocs de couleurs, mais c’est la même chose !
Par défaut toutes les images sont cachés grâce à notre bon vieux display:none, et nous allons les faire apparaître grâce à :target qui appliquera l’attribut display:block montrant notre bloc sélectionné.
Ce qu’il faut savoir sur cette classe, c’est que quand vous cliquez sur un second élément avec une pseudo-class :target, les styles appliqués au précédent élément sont annulés.

Voici comment nous allons procéder, nous allons faire une grande zone pour l’image sur le dessus avec 3 aperçus en dessous.


Et voici le CSS :

body {
	margin:0;
}
#container {
	width:720px;
	margin:50px auto;
}
#galerie {
	width:700px;
	background:#eee;
	border-bottom:3px solid #aaa;
	padding:10px;
	float:left;
}
#bloc_img {
	width:700px;
	height:500px;
	float:left;
	margin-bottom:10px;
	border-top:1px solid #aaa;
	border-bottom:1px solid #fff;
}
#img_1, #img_2, #img_3 {
	width:700px;
	height:500px;
	display:none;
}
#img_1:target {
	display:block;
	background:#03a7e7;
}
#img_2:target  {
	display:block;
	background:#fdd12c;
}
#img_3:target  {
	display:block;
	background:#467d76;
}
#bloc_bt {
	float:left;
	width:700px;
	height:50px;
}
a.bt_1, a.bt_2, a.bt_3 {
	float:left;
	width:226px;
	height:50px;
	margin-right:11px;
	color:#fff;
	text-align:center;
	line-height:50px;
	text-decoration:none;
}
a.bt_1:hover, a.bt_2:hover, a.bt_3:hover {
	color:#545454;
}
a.bt_1 {
	background:#03a7e7;
}
a.bt_2 {
	background:#fdd12c;
}
a.bt_3 {
	margin-right:0;
	background:#467d76;
}

Voilà, ici ce qu’il faut comprendre, c’est que quand vous allez cliquez sur un lien qui cible un des éléments comportant la pseudo-class l’élément ciblé adopte ds nouveaux styles. L’intérêt est de pouvoir interagir à distance avec un élément précis en lui appliquant des effets et tout cela sans javascript.

Vous pouvez ajouter d’autres aperçus, y mettre de vraies images (la hauteur de l’affichage général pourra s’adapter) vous pouvez mettre les liens à l’autre bout de la page, les styles agiront et en plus vous serez transportez à l’élément indiqué grâce à l’ancre.

Il y a beaucoup de chose à faire avec cette pseudo-class :target et dans un prochain article nous ferons un petit carrousel entièrement en CSS !

A +

3 réponses à “Réalisons une galerie d’images en CSS avec la pseudo-class :target”

  1. 1
    galerie dit :

    ‘laisser un commentaire si vous voulez mettre du code dans vos messages’, un peun obscur :)

  2. 2

    [...] não sou o autor original dessa galeria, acabei a encontrando no site VirtuousWeb e acabei efetuando algumas alterações para que a mesma funcionasse no Internet [...]

  3. 3

    [...] 3. Make an image gallery with CSS pseudo-class: target [...]