Pouvoir zoomer sur une image peut être utile pour voir celle-ci en détail. Surtout si vous présentez un produit.

Il est toujours intéressant d’avoir la possibilité de zoomer sur les images d’un produit pour pouvoir voir tous les détails du produit que vous mettez en vente sur votre site.

Créer un effet de zoom n’est pas si difficile à réaliser, avec quelques bouts de code CSS vous allez pouvoir créer un zoom au survol de la souris sur une image de votre site.

Zoomer sur une image au survol

Pour commencer, vous devez avoir un élément HTML contenant une image. Ici, nous utiliserons une balise « img » à laquelle nous indiquerons l’URL d’une image à afficher :

<img src="./monimage.jpg">

Vous pouvez utiliser l’image que vous souhaitez en modifiant l’attribut « src ».

Ensuite, vous devez définir une taille de base à votre image ainsi que quelques paramètres qui serviront au zoom de votre image.

Dans notre exemple, nous donnerons une largeur de « 200px » à notre image ainsi qu’une durée de 1 seconde (1s) pour toute transition impliquant une transformation (transform) sur notre image :

img{
width: 200px;
transition: transform .1s;
}

Pour finir et créer l’effet « Zoom », vous devrez simplement déclencher un agrandissement (scale) de l’image lorsque l’image est survolée (:hover)

Dans notre exemple, nous créons un agrandissement de X 1.5 de la taille définie précédemment de notre image :

img:hover{
-ms-transform: scale(1.5); /* IE 9 */-webkit-transform: scale(1.5); /* Safari 3-8 */transform: scale(1.5);
}

Et voilà ! Avec ces quelques lignes de code, vous aurez un effet de zoom sur votre image. Vous pouvez définir une « class » ou un « id » spécifiques à votre image pour appliquer cet effet de zoom à quelques images et non à toutes les images de votre page.

Créer un zoom ciblé sur une image

Précédemment, nous vous avons présenté la manière de créer un zoom « simple » par l’agrandissement de l’image.

Cependant, il existe de nombreuses autres façons de zoomer sur une image et l’une de ces façons est de zoomer sur une partie précise de l’image sans pour autant l’agrandir.

Vous gardez vos images dans leurs dimensions définies, mais vous pouvez tout de même zoomer sur une zone de l’image qui vous parait intéressante à voir de plus près.

Pour créer cet effet, vous devez avoir une image contenue dans un bloc comme ceci :

<div class="image-zoom">
<img src="https://i.ibb.co/xsH8b3S/Tabby-cat-with-blue-eyes-3336579.jpg" alt="Mon chat">
</div>

Ensuite en CSS, vous définirez une taille fixe (width et height) à la zone contenant votre image. C’est dans cette zone que votre image sera contenue et elle ne pourra pas en sortir (overflow :hidden).

Dans notre exemple, la zone contenant notre image aura une largeur de 200px et sa hauteur s’adaptera à celle de l’image, nous ne renseignons donc pas de hauteur.

Pour que l’image ne dépasse pas visuellement de la zone, nous ajoutons la propriété « overflow » avec pour valeur « hidden » à notre zone.

.image-zoom{
width: 200px;
overflow: hidden;
}

Pour ce qui est de l’image, elle devra prendre la totalité de la taille de la zone (width : 100%) et vous devrez lui définir des paramètres lorsqu’une transformation lui sera appliquée (transition: transform .1s) :

img{
width: 100%;
transition: transform .1s;
}

Et enfin, vous allez pouvoir créer l’effet de zoom ciblé, qui consiste à agrandir l’image et déplacer l’image dans la zone définie précédemment pour réaliser un zoom sur une partie de l’image.

Évidemment vous n’êtes pas obligé de déplacer l’image et juste garder l’agrandissement ce qui fera que l’image sera juste zoomée sans que vous ayez visuellement un agrandissement de l’image, puisqu’elle est contenue dans un bloc.

Dans notre exemple, nous appliquerons un zoom x3 et déplacerons l’image de 30 pixels sur l’axe « x » (horizontal) au survol de l’image par la souris.

img:hover{
-ms-transform: scale(3) translate(30px); /* IE 9 */-webkit-transform: scale(3) translate(30px); /* Safari 3-8 */transform: scale(3) translate(30px);
}

Vous pouvez aussi déplacer l’image sur l’axe « y » (vertical) en ajoutant une seconde valeur à « translate(30px).

Conclusion

Si vous avez des images sur votre site, ce qui est certainement le cas, vous pourriez avoir besoin d’implémenter l’une de ces techniques sur vos images pour que les utilisateurs de votre site puissent zoomer dessus.

Ces deux techniques ne sont pas très complexes et ne nécessitent pas tant de connaissances que ça pour les appliquer.

Cependant si vous souhaitez avoir un zoom plus complexe ou visuellement plus joli, n’hésitez pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un freelance qui saura créer un zoom selon vos envies.