Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Galerie photo hover avec transition CSS

Utiliser les transitions pour créer une galerie photo

Création: décembre 2010Modifié:

Contenu
Full CSS Pas de JavaScript
Navigateurs
Firefox Safari Chrome Opera
Partagez
Facebook Twitter

Votez

105 votes4.39

Créer des effets de transition avec CSS3. Utiliser les transitions pour créer une galerie photo.

Utilisation des transitions CSS pour cet effet.

Voici le code HTML ( chaque image est dans un "li" )

<ul>
    <li>
         <a href="#">
         <img src="firefox.jpg" alt="" />
         <strong>Firefox</strong>
         </a>
    </li>
    <li>
         <a href="#">
         <img src="opera.jpg" alt="" />
         <strong>Opéra</strong>
         </a>
    </li>
   
    ...

</ul>

Puis utilisation des transitions CSS pour créer l’effet.

ul li{
    position:relative;float:left;
    width:100px;height:100px;padding:10px;list-style:none;
}
/*permet de créer deux lignes*/
ul li:nth-child(4n){clear:left;}
        
ul li a{
    display:block;overflow:hidden;
    width:100px;height:100px;
    margin-top:0px;margin-left:0px;
    border:0px solid rgba(0,0,0,0.7);
    transition-property:width,height,margin,z-index,border;
    transition-duration:0.4s;
}

ul li a:hover{
    position:absolute;
    width:200px;height:200px;
    margin-top:-56px;margin-left:-56px;
    z-index:100;
    border:6px solid rgba(0,0,0,0.7);
}
        
ul li a img{
    position:absolute;
    width:100px;height:100px;z-index:20;
    transition-property:width,height,z-index;
    transition-duration:0.4s;
}
        
ul li a:hover img{
    width:200px;height:200px;
    z-index:100;
}

L’effet fonctionne dans tous les navigateurs prenant en charge les transitions CSS ( Safari/Chrome, Firefox 4 )

Envie d'une nouvelle démo?

Un p'tit mot...

#1par cedricici, le 15 mars 2011

C’est quoi ce maxton qui traine la ? met un vrai truc, je sais pas moi "midori" par exemple...

#2par css3create, le 8 avril 2011

C’est bon, c’est bon. Voila j’ai mis Midori, c’est vrai que Maxthon est très peu utilisé. Alors que Midori... ;-)

#3par ryo, le 8 mai 2011

ok c cool ca mais la transition du n’est pas détaillée dans le css. Pourriez vous la détaillez car sur mon chrome en reprenant les css et html ca sort pas ? Merci d’avance !!!

#4par ryo, le 8 mai 2011

je rectifie car le mot < strong > n’est pas apparu !!!

#5par Balzac_40, le 17 octobre 2011

Sympa, mais il manque quelques lignes de CSS pour réaliser le tout !
Il faut donc les trouver en examinant le code source de votre page...

#6par Balzac_40, le 17 octobre 2011

Pour moi, l’expression nth-child devrait être 4n+4 et non 3n+1 qui sélectionne le premier... ?

#7par css3create, le 17 octobre 2011

@Balzac_40 : effectivement le 3n+1 sélectionne aussi le premier élément (du au +1 justement). Il suffit d’utiliser :nth-child(4n) pour corriger le problème. 4n+4 est je pense redondant. Merci.

#8par Kao, le 9 janvier 2012

Ca marche pas

#9par fedios, le 19 février 2012

nice tricks but watching the source code of the page could’nt reproduce the same effect it would be nice if you do a tutorial in how to reproduce exactly the transition property effect

#10par celuiquivoulaitapprendrelecss, le 14 août 2012

sa marche pas la transition et le texte

#11par Shiro, le 14 août 2012

Bonsoir !
Tout d’abord merci pour le tuto, il marche niquel ...
J’ai juste un petit soucis quand j’intègre celui ci dans un

, quand je passe par dessus les images ça les décales vers la droite la première fois et je dès que j’enlève le align, ça fonctionne.
Sais-tu pourquoi ? Et comment je pourrais faire pour mettre les images au milieu d’un site, merci d’avance ^^

#12par Ricard, le 16 mars 2013

Merci pour le tuto =). Je pense utiliser l’idée pour la PA d’un forum, je citerai la source !

Et pour ceux qui pourrissent gratuitemennt les tutos, le code source de la page peut être utile, Google est votre ami et oubliez pas de vous servir de votre tête aussi de temps à autres !

#13par SexyQo, le 20 mars 2013

Bonjour, tout d’abord très belle démo et bon tuto. Merci beaucoup.
Par contre, mon résultat est quelque peu lent sur mes navigateurs chrome et mozilla, est-ce normal ?
Ensuite, j’ai pu remarqué, comme d’autre, que pour reproduire exactement la démo il faut rajouter plusieurs lignes css.
Serait-il possible de les avoir ? :)


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)