Créer une galerie photos avec CSS 3
Table des matières
Mise en place de la structure HTML Effet au survol du curseur

Créer une galerie photos avec CSS 3

Web CSS

Toujours à la recherche de solutions permettant de réaliser des effets avec CSS 3, je me suis penché sur la création d’une galerie photos sans JavaScript.

Le but va être de réaliser un ensemble d’aperçus de photos comme sur ce site : http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/.

Bien entendu, JavaScript interdit ;)

Mise en place de la structure HTML

Avant toute chose, nous allons définir la structure de notre fichier HTML.

<ul id="thumbs">
  <li><a href="#"><img alt="landscape001.jpg" src="landscape001.jpg" /></a></li>
  <li><a href="#"><img alt="landscape002.jpg" src="landscape002.jpg" /></a></li>
  <li><a href="#"><img alt="landscape003.jpg" src="landscape003.jpg" /></a></li>
  <li><a href="#"><img alt="landscape004.jpg" src="landscape004.jpg" /></a></li>
  <li><a href="#"><img alt="landscape005.jpg" src="landscape005.jpg" /></a></li>
  <li><a href="#"><img alt="landscape006.jpg" src="landscape006.jpg" /></a></li>
  <li><a href="#"><img alt="landscape007.jpg" src="landscape007.jpg" /></a></li>
  <li><a href="#"><img alt="landscape008.jpg" src="landscape008.jpg" /></a></li>
  <li><a href="#"><img alt="landscape009.jpg" src="landscape009.jpg" /></a></li>
</ul>

Il s’agit tout simplement d’une liste de photos (les aperçus) : la galerie.

##Mise en page

Il faut maintenant positionner notre galerie.

Pour cela, nous optons pour une disposition de 3 photos par ligne.

Le code CSS ci-dessous va nous y aider :

#thumbs {
  list-style: none outside none; /* On supprime le style de la liste par défaut */
  margin: 0 auto; /* La galerie est centrée horizontalement */
  padding: 0;
  width: 480px;
}

#thumbs li {
  float: left;
  height: 112px;
  margin: 0;
  padding: 5px;
  position: relative;
  width: 150px;
  z-index: 10;
}

#thumbs li:hover {
  z-index: 100; /* Nécessaire pour Firefox */
}

#thumbs li img {
  border: 5px solid #fff;
  z-index: 100;
  transition: transform 0.25s ease-in-out;
  -moz-transition: -moz-transform 0.25s ease-in-out;
  -o-transition: -o-transform 0.25s ease-in-out;
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transform: scale(0.75); /* On réduit l'image à 75% */
  -moz-transform: scale(0.75);
  -o-transform: scale(0.75);
  -webkit-transform: scale(0.75);
}

Nous obtenons alors une galerie photos centrer horizontalement, avec 3 colonnes.

Au passage, nous réduisons la taille des images à 75% et nous définissons la transition qui sera appliquée au survol du curseur.

Pour plus d’informations sur les propriétés CSS, vous pouvez vous référer au site du W3C :

Effet au survol du curseur

Le but est maintenant de définir le style lorsque le curseur se positionne au dessus de l’image souhaitée.

Pour cela, nous ajoutons le code ci-dessous :

#thumbs:hover li img {
  opacity: 0.5; /* Au survol de la galerie, toute les images auront une opacité de 50% */
}

#thumbs li:hover img {
  opacity: 1; /* L'image survolée aura une opacité de 100% */
  z-index: 100;
  transform: scale(1); /* On affiche l'image à sa taille normale */
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  box-shadow: 1px 1px 10px #000; /* On ajoute une ombre */
  -moz-box-shadow: 1px 1px 10px #000;
  -o-box-shadow: 1px 1px 10px #000;
  -webkit-box-shadow: 1px 1px 10px #000;
}

Les effets au survol du curseur sont obtenus en utilisant la pseudo-class :hover.

Pour les détails sur la propriété box-shadow, vous pouvez consulter le site http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-box-shadow.

Démo