Comment créer un effet de zoom sur une image au passage de la souris (rollover) en CSS ?
Les feuilles de styles en cascade permettent de créer un effet de zoom au passage de la souris sur une image.
Grâce aux nouveautés apportées par la version 3 du langage CSS, il est possible de créer des effets impressionnants, comme par exemple effectuer un zoom au passage de la souris sur une image.
Pour effectuer cet effet, placez d'abord votre image dans une division qui sera elle-même contenue dans une autre division :
<div class=zoom> <div class=image> <img src=img.jpg alt=Text de remplacement/> </div> </div>
La première division a une taille fixe tandis que la seconde division, qui contient l'image, possède une taille égale à 100%. Pour effectuer la transformation de l'image, modifiez l'image quand la souris passe dessus. Utilisez pour cela le mot-clé hover avec l'élément. Pour zoomer, utilisez la propriété CSS3 transform. Elle permet de transformer un élément. En utilisant le mot-clé scale, on peut agrandir une image. Il ne reste plus qu'à donner l'effet de zoom avec un agrandissement de l'image. On utilise sur l'image la propriété CSS3 transition qui permet de définir un effet de transition lors de la modification d'un l'élément. L'effet ease indique une transition avec un départ lent, puis un mouvement rapide et une fin plus lente, donnant ainsi l'impression de zoom.
.zoom {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
/* L'image est grossie de 25% */
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Pensez bien à utiliser les préfixes pour les deux propriétés, vous aurez ainsi une plus grande compatibilité avec les navigateurs.