Blog iamvdo.me
Firefox
Opéra
Midori
Safari
Chrome
Internet ExplorerUtilisation 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 )
#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
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 ? :)