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 sur une image en CSS

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 :

Compatibilité de la propriété transform

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 :

Compatibilité de la propriété transition

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 :

Chat exemple

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 :

Chat exemple

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

Chat exemple

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}
Chat exemple

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}
Chat exemple

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}
Chat exemple

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)}
Chat exemple

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.


Poster un commentaire

Votre adresse e-mail ne sera pas publiée.

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

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

  • Morgan

    Super pratique et adaptable facilement même si on n’est pas sur WP. Merci !

    Répondre à Morgan
  • dave

    Bonjour,
    Comment lancer le zoom à l’ouverture de la page, et non pas en :hover ?
    Merci

    Répondre à dave
    • Marlène

      Bonjour Dave, j’essaierais de créer un événement « onload » sur le body de la page concernée, qui déclenche une fonction JavaScript qui vient ajouter la classe du zoom aux images (avec classList.add).

      Répondre à Marlène
  • Younès

    Bonjour Marlène,

    C’est vraiment sympa cet article, j’ai passé un bon moment pour faire tous ces effets. Merci.
    Juste une petite remarque, il manque filter:grayscale(0%) dans le code pour supprimer le filtre après au survol ;-)

    Répondre à Younès
    • Marlène

      Hello Younès, merci d’avoir repéré l’oubli, c’est réparé ! Bonne soirée :)

      Répondre à Marlène
  • Chouchou

    Le bout de code transition peut aussi être dans la class .img et non dans la partie :hover, ce qui permet à l’animation ne se lancer au rollout. Ce qui donne :
    .zoom-flou {overflow:hidden}
    .zoom-flou img {width:100%;height:auto;filter:blur(5px);-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}
    .zoom-flou img:hover {filter:blur(0);-webkit-transform:scale(1.2);transform:scale(1.2)}

    Répondre à Chouchou
    • Marlène

      Merci pour le complément ! On peut faire plein de choses en matière d’effets :)

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.