Comment créer un effet de zoom sur une image en CSS ?

Aujourd'hui, je vais vous montrer comment créer un effet de zoom sur une image en CSS. L'idée est de donner un peu de dynamisme à vos pages web à travers cet effet facile à mettre en place, qui donne l'impression de s'immerger dans une photo quand on la survole.

Cela peut par exemple servir à valoriser une image cliquable, en montrant à l'internaute qu'il se passe quelque chose quand il passe la souris sur ce visuel précis ou qu'il tapote l'écran sur mobile. Sur WordPress, cet effet est souvent utilisé sur les pages de catégorie, pour mettre en valeur les miniatures des articles.

Voici un exemple du rendu de ce zoom avec ce visuel :

Créer un effet de zoom en CSS : principe général

Le principe est assez simple à comprendre : nous allons "enfermer l'image" dans une boîte... et faire un zoom à l'intérieur de cette boîte (comme vous pouvez le voir avec l'exemple ci-dessus, l'image elle-même ne se déplace pas sur la page, ne s'agrandit pas sur la page, elle reste bien dans un même espace).

Pour gérer tout ça, nous allons utiliser le langage CSS, langage de référence pour la mise en forme de pages web... et plus spécifiquement des propriétés du langage CSS3.

Il y a d'abord la propriété "transform", qui permet de modifier la perspective d'un visuel ou de le faire tourner. Elle est compatible avec de nombreux navigateurs :

Nous allons combiner cette propriété avec la propriété "transition", qui permet de contrôler la vitesse de l'animation que l'on va réaliser, histoire d'avoir un rendu fluide, progressif, au lieu d'un zoom brutal et instantané. Même chose, les transitions sont compatibles avec de nombreux navigateurs :

Le langage CSS a l'avantage d'être très ouvert (la compatibilité est large), de ne pas alourdir la page web de manière significative, contrairement à des effets gérés en JavaScript qui peuvent être plus gourmands en ressources.

Ajouter l'effet de zoom sur une image en CSS : code à utiliser

Selon votre situation, vous allez soit :

• Animer ponctuellement une seule image, auquel cas vous pouvez envisager de rentrer tout le code CSS directement sur la page en question ;
• Animer un ensemble d'images similaires (par exemple, toutes les miniatures de vos articles à l'intérieur d'une rubrique), auquel cas il sera préférable de rentrer le code dans la feuille de style globale de votre site.

L'ajout d'un effet de zoom va se dérouler en 2 étapes : d'abord, nous allons créer une "boîte" qui va venir enfermer les images sur lesquelles on veut appliquer l'effet (avec le langage HTML) ; ensuite, nous allons définir l'animation qui se déroulera dans la boîte (avec du CSS).

Enfermer l'image dans un conteneur

Pour commencer, vous devez cibler l'image ou les images sur lesquelles appliquer l'effet de zoom.

Sur WordPress, le code de votre image en HTML se présente en général comme ceci (quand vous insérez une image dans un article par exemple) :

<img src="https://www.notuxedo.com/wp-content/uploads/2022/04/effet-zoom-image-css.jpg" alt="Créer un effet de zoom sur une image en CSS" width="930" height="622" class="size-full wp-image-32416" />

Vous avez le lien de l'image, le texte alternatif qui décrit l'image, sa taille (largeur et hauteur) et des "classes" qui déterminent sa mise en forme. Si vous n'utilisez pas WordPress, vous avez peut-être une version beaucoup plus simple de ce code, avec seulement le lien de l'image, qui est le seul élément obligatoire.

<img src="https://www.notuxedo.com/wp-content/uploads/2022/04/effet-zoom-image-css.jpg" />

Si vous êtes en train de modifier un thème WordPress, vous avez peut-être quelque chose comme :

<?php $post_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'montheme' ); ?>

C'est une fonction dynamique qui récupère automatiquement le lien du "post thumbnail", c'est-à-dire la miniature associée à un article. Sur WordPress, il existe plein de fonctions dynamiques comme celle-ci et quand on essaie de modifier son site pour la première fois, il faut mener un petit travail d'enquête pour essayer de comprendre "quelle fonction contrôle quoi" et retrouver à quel endroit modifier le code.

Pour l'exemple, je vais prendre une image que j'insère dans un article... comme ce chat :

A ce stade, comme vous pouvez le constater, pas d'animation, pas de zoom sur l'image. Le lien de l'image ressemble à ça :

<img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" />

Sans toucher à ce lien, je vais "l'enfermer dans une boîte", que je vais appeler "zoom-image". Regardez bien ci-dessous, il y a à la fois une partie qui précède le lien de l'image (<div class="zoom-image">) mais aussi une partie qui suit le lien de l'image (</div>). On enferme littéralement l'image dans cette boîte.

<div class="zoom-image"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

Définir l'effet de zoom sur l'image en CSS

Nous allons maintenant créer le code CSS qui définit ce qui se passe dans la boîte. Je vous donne le code complet... et je vous décompose ensuite ses différentes parties !

.zoom-image {overflow:hidden}
.zoom-image img {width:100%;height:auto}
.zoom-image img:hover{width:100%;-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:1s ease-in-out;transition:1s ease-in-out}

La première ligne ".zoom-image" détermine que l'image ne doit pas sortir de la boîte de manière visible quand on zoome dessus. Autrement dit, si elle déborde parce qu'on la grossit ("overflow" veut dire "déborder" en anglais), ce débordement doit être caché ("hidden").

La ligne .zoom-image img indique que cette fois-ci, on s'intéresse à l'image ("img") qui se trouve à l'intérieur de la boîte "zoom-image" : on impose à cette image d'occuper 100% de la surface disponible dans la boîte (et on demande que sa hauteur s'adapte en conséquence !). Ainsi, quand on va zoomer, on va s'assurer que l'image ne change pas de taille.

La ligne .zoom-image img:hover indique ce qui se passe quand on survole l'image ("hover" = planer en anglais). Et justement, que se passe-t-il ?

• width:100% : l'image conserve une largeur de 100%, elle ne change donc pas de taille, le zoom a lieu à l'intérieur mais n'affecte pas les proportions de l'image.
• -webkit-transform et transform : c'est la fameuse propriété "transform" qui définit le type d'animation à réaliser. On l'écrit de deux manières différentes (avec et sans "webkit") pour maximiser la compatibilité avec différents navigateurs, aussi bien sur Mac que sur PC. Ici, l'effet choisi est une modification de l'échelle de l'image ("scale" = échelle). Autrement dit, un effet de zoom. On multiplie par 1.3 la taille de l'image (on aurait pu choisir autre chose).
• -webkit-transition et transition : c'est la propriété qui détermine la "fluidité" de l'effet de zoom. Ici, on utilise "ease-in-out", un type de transition qui est lent au début, lent à la fin pour une fluidité maximale... et on opte pour un effet de 0.5 seconde. On aurait pu choisir un autre type de transition, comme "ease-out" (rapide au début, lent à la fin), "linear" (vitesse constante) ou "ease-in" (lent au début, rapide à la fin).

L'image du chat dispose maintenant du zoom :

Si j'enlève la transition, comme vous pouvez le constater l'effet est beaucoup plus "brutal".

A quel endroit insérer le code CSS ?

Si vous ajoutez un effet de zoom sur une image en CSS à un seul endroit (sur une page par exemple), vous pouvez tout simplement copier le code dans le corps de votre article, en le plaçant entre des balises "style" comme ceci :

<style type="text/css">.zoom-image {overflow:hidden}
.zoom-image img {width:100%;height:auto}
.zoom-image img:hover{width:100%;-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:1s ease-in-out;transition:1s ease-in-out}</style>

Si vous comptez utiliser cet effet sur plusieurs images, il est préférable de le copier dans la feuille de style qui contrôle l'apparence de votre site. Sur WordPress, c'est par exemple le fichier "style.css" de votre thème ou thème enfant. Dans ce cas, pas besoin des balises "style", vous pouvez directement copier ce bout du code :

.zoom-image {overflow:hidden}
.zoom-image img {width:100%;height:auto}
.zoom-image img:hover{width:100%;-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}

Variantes créatives de l'effet de zoom

On peut effectuer quelques variantes assez sympa de l'effet de zoom sur une image, en le combinant avec d'autres effets CSS, par exemple la couleur, le flou ou encore la rotation.

Zoomer sur une zone précise de l'image

On reprend le même principe : cette fois-ci, j'appelle ma "boîte" zoom-zone, mon image se présente donc comme ceci :

<div class="zoom-zone"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

Et cette fois-ci, le code CSS prévoit deux choses :

• Dans l'image elle-même, je détermine à quel endroit on va orienter le zoom sur un axe horizontal et sur un axe vertical (à l'aide de deux pourcentages).
• Au survol de l'image, je change l'échelle ("scale") mais cette fois-ci avec un gros zoom x4 et je conserve un petit effet de transition fluide.

Ce qui donne ça :

.zoom-zone {overflow:hidden}
.zoom-zone img {width:100%;height:auto;transform-origin:60% 50%}
.zoom-zone img:hover {-webkit-transform:scale(4);transform:scale(4);-webkit-transition:transform 1s,.5s ease-in-out;transition:transform 1s,.5s ease-in-out}

Zoomer et coloriser l'image

On peut aussi combiner zoom et jeu sur la couleur. Cette fois-ci, j'appelle ma boîte "zoom-couleur".

<div class="zoom-couleur"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

Et je construis mon code CSS en ajoutant :

• Sur l'image elle-même, un filtre qui cache la couleur et met l'image en niveaux de gris ("grayscale").
• Au survol, on annule ce filtre grayscale en le mettant à zéro pour que l'image retrouve sa couleur, en plus de garder un effet de zoom x1.2.

.zoom-couleur {overflow:hidden}
.zoom-couleur img {width:100%;height:auto;filter:grayscale(100%)}
.zoom-couleur img:hover{width:100%;filter:grayscale(0%);-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:1s ease-in-out;transition:1s ease-in-out}

Zoomer et rendre l'image nette

Autre exemple : afficher une image floue, qui va devenir nette quand on zoome. Même logique, je nomme ma boîte "zoom-flou".

<div class="zoom-flou"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

Et je place dans mon code CSS :

• Sur l'image, un filtre qui crée un effet de flou ("blur"). Plus le chiffre entre parenthèses est élevé, plus c'est flou.
• Au survol, même principe que pour la couleur, j'annule le filtre qui crée le flou et je conserve mon effet de zoom.

.zoom-flou {overflow:hidden}
.zoom-flou img {width:100%;height:auto;filter:blur(5px)}
.zoom-flou img:hover {filter:blur(0);-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}

Zoomer avec un effet de rotation

Allez, un petit dernier pour la route avec ce "zoom-rotation" !

<div class="zoom-rotation"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

Pour le code CSS, on applique cette fois-ci un effet uniquement lors du survol. Il combine un zoom x1.8 et une rotation de 45 degrés, le signe moins indiquant que la rotation s'effectue dans le sens inverse des aiguilles d'une montre.

.zoom-rotation {overflow:hidden}
.zoom-rotation img {width:100%;height:auto}
.zoom-rotation img:hover {width:100%;-webkit-transform:scale(1.8) rotate(-45deg);transform:scale(1.8) rotate(-45deg)}

Si vous voulez voir un exemple d'effet de zoom "en action", je l'utilise sur la page d'accueil de mon blog voyage pour mettre en avant les différentes destinations.