Souscrire
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
Ca marche pas
#9par fedios, le 19 février
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