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

Effets de survol avec transitions et filtres CSS

Donner de la profondeur à vos galeries photos

Création: juin 2012Modifié:

Contenu
Full CSS Pas de JavaScript
Navigateurs
Chrome
Partagez
Facebook Twitter

Votez

54 votes4.63

Démo 100% CSS. Utilisation des transformations, des transitions et des filtres CSS afin de simuler un effet de profondeur, grâce à l’effet flou gaussien et niveau de gris.

Marche à 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);
}

Envie d'une nouvelle démo?

Un p'tit mot...

#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 ?


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.)