Dans ce petit tutoriel, nous allons voir comment faire pour ajouter un petit zoom sur une image au survol de la souris.

Ce zoom permettra de faire un petit effet sympa sur l’image lorsque le curseur de la souris entrera dans le zone délimitée par celle-ci et lorsque la souris sortira de cette zone, l’image reviendra à sa taille initiale.

Pour ce faire nous allons donc ajouter à notre page deux directives CSS qui vont lancer les animations si la souris entre ou sort de la surface de l’image, et une directive CSS pour éviter que l’image ne déborde de son conteneur.

Ce tuto montre une manière de faire, mais d’autres  sont envisageables, notamment pour ceux qui souhaitent éviter l’utilisation du CSS 3 et privilégier jQuery par exemple.

Code Html

Ce code Html simpliste permet de positionner les différents éléments et de voir à quels objets s’appliquent le CSS.

<div id=”container”>
<img src=”img.png” alt=”” />
</div>

Code CSS

Ce code CSS permet d’indiquer que le container ne doit pas montrer le contenu qui dépasse de son cadre, impératif si on ne veut pas se retrouver avec un souci lié à l’animation.

La première partie liée à l’image indique que l’échelle par défaut est à 1 (100%), on peut lui mettre une autre valeur si besoin.

La transition va permettre de définir les éléments de l’animation, ici les deux dimensions (all), pendant 0.3 secondes, de manière linéaire (ease-in-out) et sans transition (0s)

La deuxième indique l’échelle au survol, ici 1.1 (110%).

#container {
    overflow: hidden;
}

#container IMG {
    -webkit-transition: all 0.3s ease-in-out 0s;
    transform: scale(1);
    transition: all 0.3s ease-in-out 0s;
}

#container IMG:hover {
    transform: scale(1.1);
}

Conclusion

Ce bout de code a été testé et validé sur les navigateurs les plus répandus, opéra, safari, chrome, firefox et I.E. 11

Même si ce genre de code n’apporte pas une grosse plus-value à votre site, elle ajoute néanmoins une petite touche sympa à votre site et ne prend pas longtemps à être mise en place.

Sources du tuto

Le fichier complet des sources avec un exemple peut se télécharger ici.