Blog iamvdo.meMarche à suivre
Pour réaliser cet effet, utilisez une simple liste d’images que vous positionnez à votre convenance. Dimensionnez le tout.
Commençons par ajouter une transformation lors du survol de nos images :
ul li img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}Ici, nous ajoutons un agrandissement de 150%.
Note : pour éviter les problèmes de superposition, j’utilise position: absolute sur les images, avec z-index: 1 à l’état normal, puis en fixant z-index: 5 lors du survol.
Ensuite, ajoutons une transition pour que l’effet soit progressif :
ul li img{
-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
-moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
-ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
-o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
transition: all .5s cubic-bezier( .6, 2, .4, 1);
}Ici, toutes les propriétés seront animées, en utilisant la méthode cubic-bezier dont une valeur est hors bornes (supérieure à 1). Cela provoquera un léger rebond lors de l’agrandissement.
Enfin, l’utilisation des récents filtres CSS nous permet de créer de la profondeur, avec l’application d’un filtre de flou et d’un filtre niveau de gris. Ces filtres sont appliqués sur les images qui ne sont pas survolées :
ul:hover li img:not(:hover){
-webkit-filter: grayscale(1) blur(5px);
-moz-filter: grayscale(1) blur(5px);
-ms-filter: grayscale(1) blur(5px);
-o-filter: grayscale(1) blur(5px);
filter: grayscale(1) blur(5px);
}Compatibilité
L’effet d’agrandissement avec les transitions est compatible au sein de la majorité des navigateurs récents. Les effets de flou et niveau de gris ne sont reconnus que sous Chrome 19+.
Pour ceux qui le souhaitent, voici le code complet utilisé.
Code HTML
<ul>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
</ul>Code CSS complet
ul{
width:302px;
height:320px;
margin:70px auto;
}
ul li{
list-style:none;
float:left;
width:141px;
height:150px;
margin:5px;
}
ul li:nth-child(3){
clear:left;
}
ul img{
position:absolute;
z-index:1;
height:150px;width:auto;
margin:0;
box-shadow:0 0 3px black;
-webkit-transition:all .5s cubic-bezier(.6,2,.4,1);
-moz-transition:all .5s cubic-bezier(.6,2,.4,1);
-ms-transition:all .5s cubic-bezier(.6,2,.4,1);
-o-transition:all .5s cubic-bezier(.6,2,.4,1);
transition:all .5s cubic-bezier(.6,2,.4,1);
}
ul li:hover img{
z-index:5;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
box-shadow:0 0 10px black;
}
ul:hover li:not(:hover) img{
-webkit-filter: grayscale(1) blur(5px);
-moz-filter: grayscale(1) blur(5px);
-ms-filter: grayscale(1) blur(5px);
-o-filter: grayscale(1) blur(5px);
filter: grayscale(1) blur(5px);
}
#1par MonsieurPixel, le 27 juin 2012
Merci ! Je cherchais comment réaliser un effet de rebondit et cela m’a beaucoup aidé ! :)
#2par Gil, le 15 juillet 2012
Bravo !
Un Grand merci !
#3par theo, le 16 août 2012
Bonjour, Tous d’abord merci beaucoup, super effet.
J’ai cependant le soucis qu’a l’arriver de ma page, les photo ne sont pas dans mes li mais a l’exterieur.
Savez vous comment le régler ?
#4par Greyback, le 5 septembre 2012
Super tuto, merci c’était super bien j’aime. un très grand merci vraiment
#5par lariflette77, le 19 septembre 2012
Bravo et Merci pour tous vos dictaciels qui sont formidalbe
#6par pabl33, le 20 octobre 2012
Merci ! Super Tuto ! Seul problème, il y a quelques bugs sous chrome avec transform : scale(1.5).
#7par Korun, le 7 novembre 2012
Merci ! très bon tuto, très clair !
#8par Anonyme, le 31 janvier 2013
Cela marche très bien sous firefox :)
#9par Bewolf, le 26 février 2013
Tuto tres clair et avec les codes sources c’est encor mieux :D
#10par Leyla, le 11 mars 2013
Vous êtes les meilleurs csss3create, merci merci mercii que dieu vous bénisse.
#11par Gotrunk95, le 24 mars 2013
Très bon tuto mais les filtres ne marchent pas sous Firefox. Quelqu’un sait comment le rendre compatible avec Firefox ?
#12par Pierre, le 9 avril 2013
Je me suis rendu compte d’un truc en appliquant ton tuto à mon site : vu que les filtres se déclenchent au :hover de
<ul>, il y a forcément un petit zone autour de chaque image qui permet de rendre l’ensemble des images flou et gris. Quelqu’un à un idée pour empêcher ça ?Sinon ça marche d’enfer :D
#13par Aur3, le 12 mai 2013
Je suis impressionné de voir autant d’effets sans JS. Alors voilà, sur mon site web j’ai que 3 images et j’aimerais les mettre les unes à coté des autres mais je ne trouve pas la valeur qui fait que la 3ème est en dessous des autres, pouvez-vous m’aider ?
Si non j’ai trouvé quelques bugs (pas trop grave)
#14par Prune, le 20 août 2013
Super pour l’effet ! Mais comme vu plus haut, je n’arrive pas a appliquer scale à chrome, alors que j’ai spécifié tous les navigateurs dans mon css... Y a-t-il une solution ?