{Benjamin PREVOT}

Créer une galerie photos avec CSS 3

28 avril 2010 Web 16 commentaires

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
  • 30 avril 2010 à 00h39

    [...] Ce billet était mentionné sur Twitter par Benjamin Prevot. Benjamin Prevot a dit: Créer une galerie photos avec CSS 3 – http://bit.ly/9xSudm [...]

  • Audrey
    18 décembre 2010 à 23h57

    Bonjour,
    Je trouve votre galerie super cependant j’ai essayé d’agrandir l’image au survol, mais elle passe en dessous des images suivantes savez-vous comment je pourrai faire pour avoir l’image en survol en plus grande taille en premier plan sans avoir les extrémités des autres images qui passent par dessus ?

  • 19 décembre 2010 à 09h31

    Bonjour Audrey,

    Et merci pour ce commentaire.

    Concernant le problème d’images qui ne se superposent pas correctement, la propriété CSS z-index est là pour éviter ce désagrément.

    J’ai testé avec succès la démo sous les navigateurs suivants (sous Windows 7) :
    Google Chrome 8.0.552.224
    Mozilla Firefox 3.6.13
    Opera 11.0 (révision 1156)
    Safari 5.0.3 (7533.19.4)

    C’est vrai que je n’ai pas précisé dans mes articles quels browsers j’ai utilisés ; je fais cet ajout le plus vite possible.

    Pouvez-vous me dire quel navigateur vous utilisez pour mettre en place la galerie ?

  • Vermeulen
    21 décembre 2010 à 15h17

    J’utilise pourtant la bonne version ….
    Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.2.13)
    Gecko/20101203
    Firefox/3.6.13 ( .NET CLR 3.5.30729; .NET4.0C)

    Vous avez testé en agrandissant l’image survolée ? Ou j’ai peut-être fait une mauvaise manipulation.

  • 24 décembre 2010 à 13h04

    Bonjour,

    J’ai fait un imprime écran de la démo sous Firefox 3.6.13 : http://www.flickr.com/photos/58856922@N00/5287317879/

  • jefm
    14 août 2011 à 19h25

    Bonjour,
    Je suis en train de faire un site,j’ai mis votre galerie photos que je trouve très sympa.
    J’ai un problème quand je survole l’image,les bords des autres apparaissent dessous.
    Comment faire?
    J’utilise Firefox 5
    Wampserver
    Merci

  • 15 août 2011 à 16h28

    Bonjour jefm,

    Je viens de tester sous Firefox 5 (Ubuntu) et je n’ai aucun problème de bordure.

    En testant la démo, le rendu est-il semblable à cette capture d’écran ? http://www.flickr.com/photos/58856922@N00/5287317879/

  • jefm
    16 août 2011 à 12h49

    Bonjour,
    Merci pour la réponse,j’ai résolu mon problème.
    Sous Firefox,j’ai installé Firebug,j’ai affiché votre galerie photos de démo et j’ai repris le code CSS point par point et j’ai en plus.
    #thumbs li: hover { z-index: 100;}
    Sauf erreur de ma part.
    Tout fonctionne.
    Merci.

  • Beyond Horizon
    18 février 2012 à 16h32

    Bonjour , j’espere avoir une reponse malgré l’année et la date du message. Neanmoins…j’ai tester votre gallerie et j’ai effectivement ce probleme de chevauchement des image…sauf pour la derniere en fait. La premiere est recouverte par les miniature de toutes celle qui la suivent et seule la derniere de la liste apparait au dessus. J’ai bien mes 2 Z-index a 100 j’ai essayer de passer celui du #thumbs li: hover { z-index: 100;} a 150 mais rien n’y fait.

    Je suis acutellement sous Mozilla 10.01. Merci d’avance:)

  • 20 février 2012 à 08h38

    Bonjour Beyond Horizon,

    Je viens de tester la page de démo sous Firefox 10.0.2 (Windows) et j’ai exactement le même rendu que sur la capture d’écran : http://www.flickr.com/photos/58856922@N00/5287317879/

    Une extension rentre peut-être en conflit avec le rendu ?

  • Sophie
    11 mars 2013 à 14h39

    Bonjour , Comment fait-on pour aligner plus de 3 photos ? :/

  • 11 mars 2013 à 19h59

    Bonjour Sophie,

    Pour gérer le nombre d’images, il faut simplement changer les largeurs (propriété width) du contenant (#thumbs) et des items (#thumbs li).

    Le fait que les éléments soient positionnés en utilisant la propriété float: left permet à l’affichage de s’adapter automatiquement à la taille choisie.

  • Alexandre
    5 juin 2014 à 11h09

    Bonjour,

    tout d’abord super travail, cette galerie fonctionne a merveille sauf un point:
    quand je met la souris sur une image, elle s’agrandit, seulement si je passe la souris a l’endroit ou les photos suivantes se trouvent en arriere plan, ma photo se rétrécie et c’est la suivante qui s’agrandit.
    exemple: je passe la souris sur la photo 5, si je balade ma souris sur la photo la ou les photos 1 a 4 se trouve aucun probleme, mais si je place ma souris la ou se trouve la photo 8, alors la photo 8 s’agrandit et la 5 revient a la normale.
    Je precise que j’ai utiliser le scale pour faire en sorte que la photo séléctionnée recouvre les 8 autres.
    J’ai du mal a expliquer, alors n’hésitait pas a me poser des questions:)

  • 5 juin 2014 à 11h21

    Bonjour Alexandre,
    Tu utilises quel navigateur ?
    Je viens de tester la démo sous Chrome 35.0.1916.114 et la galerie fonctionne correctement.

  • Flo
    6 mars 2015 à 22h55

    Bonsoir Benjamin,
    Merci bien, je cherchais ça justement.
    Comme il a été précisé dans un des commentaires précédents, ne pas oublier d’insérer :

    #thumbs li: hover { z-index: 100;}

    quelque part.
    Peut-être pourriez-vous le modifier dans votre article ? Cela éviterait les questions de lors du survol, qu’il y ait un bout de la photo de droite qui se superpose.

    Je vous remercie encore,
    Flo.

  • 8 mars 2015 à 10h27

    Bonjour Flo,

    Merci pour ce commentaire.

    J’ai mis à jour l’article;-)

Les avatars utilisés proviennent du site Gravatar. Pour créer un compte, vous pouvez vous inscrire.
* Champs obligatoires