Ajouter un effet de zoom ou Ken Burns à ses images - Divi Community

Ajouter un effet de zoom ou Ken Burns à ses images

par | 1 octobre 2017 | Tutoriels Divi | 8 commentaires

Ajouter un effet de zoom ou Ken Burns à ses images

Vous aimez l’effet de zoom sur les images des articles de la page d’accueil ? Et bien cet effet CSS très simple et sympa est très rapide à mettre en place.

Vous pouvez l’utilisez sur une bonne partie des images de votre site, à condition que :

  • l’image utilisée soit dans une balise HTML <img> et non en background d’une div.
  • votre image soit l’unique balise HTML contenue dans une div

Je m’explique. Votre code doit ressembler à quelque chose comme ça :

<div class="test">
	<img id="img" src="https://julienguiard-julienguiard.pf5.wpserveur.net/wp-content/uploads/2017/10/Divi_Community_square-300.png" alt="logo Divi Community" />
</div>

Voici maintenant le code CSS utilisé pour l’effet de zoom :

/*Effet de zoom au passage de la souris*/

/* ARTICLE KEN BURNS*/
.test{
  background-color: #22313F; /* Pour que vous voyiez bien mon image*/
  overflow:hidden;/*On empeche l'image de dépasser du bloc*/
  display:block;
  width:300px; /*Notre bloc fera 300px de large*/
  margin:auto; /* on centre le bloc*/
}
#img{transition:0.5s;} /* durée de l'animation en secondes*/
#img:hover{transform : scale(1.2);} /* Zoom de l'image. La taille normale est 1 */
Passez votre souris sur l’image :
 
 
Pas mal non ?
 
Et si vous voulez on peut aussi donner un effet de rotation à l’image.
Pour cela on va utiliser la propriété CSS rotate(nombre de degré)
 
 
Voici le code CSS :

/* Effet de zoom avec rotation*/
.test{
  background-color: #22313F;
  overflow:hidden;
  display:block;
  width:300px;
  margin:auto;
}

}
#img-2{transition:0.5s;}
#img-2:hover{transform : scale(1.2) rotate(15deg);}/* ici on ajoute rotate(xdeg) */

Passez votre souris sur l’image pour voir le résulta t:

Adaptez cet effet à Divi

Ouvrez un module image et préciser la classe CSS zoom-image dans Avancé -> ID et classe CSS -> Classe CSS (attention à ne pas mettre de point avant le nom de la classe).

Copiez-collez maintenant le code suivant dans Apparence -> Personnaliser -> CSS additionnel :

.zoom-image {
  overflow:hidden;
  image-rendering: pixelated;  /* pour un rendu net dans Chrome */
}

.zoom-image img{
  transition:0.5s;
}

.zoom-image img:hover{
  transform : scale(1.2);
}

Et c’est tout.

Maintenant toutes vos images du module Image avec la classe CSS zoom-image auront cet effet au passage de la souris.

À vous de jouer !

Partager la publication "Ajouter un effet de zoom ou Ken Burns à ses images"

  • Facebook
  • Twitter

Comment ?! 
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie
20% sur la licence annuelle

8 Commentaires

  1. Thierry.A
    Thierry.A sur 27 novembre 2017 à 17h41

    Bonjour c’est intéressant mais c’est dommage que vous ne dites pas où mettre ces codes et comment faire. Pensez aux débutants qui ne savent pas coder, merci.

  2. Julien
    Julien sur 28 novembre 2017 à 10h35

    Bonjour, je vais le mettre à jour pour expliquer plus précisément 😉

  3. Thierry
    Thierry sur 29 novembre 2017 à 20h46

    Bonjour, d’accord pas de soucis. ???? ????????

  4. Adryle
    Adryle sur 14 juillet 2018 à 09h45

    Un grand merci 🙂

  5. Decoster
    Decoster sur 21 novembre 2019 à 12h07

    Bonjour, Je me permets de revenir sur le commentaire de Thierry A de novembre 2017. Où puis-je trouver le code de l’image “Vous pouvez l’utilisez sur une bonne partie des images de votre site, à condition que l’image utilisée soit dans une balise HTML et non en background d’une div.
    votre image soit l’unique balise HTML contenue dans une div”. Et pour placer les codes CSS, pourrais-tu publier u petit tuto avec des captures d’écran de DIVI ? Merci.

  6. Julien Guiard
    Julien Guiard sur 23 novembre 2019 à 20h27

    Bonjour, tu as ensuite la solution pour l’adapter au module Image de Divi?

  7. hannier
    hannier sur 6 juin 2020 à 05h23

    ça fonctionne super bien; merci à vous.
    petite question : le zoom se fait depuis le centre. Est-ce possible que le point de zoom soit déplacé ? en haut, sur les côtés…car les images ne se prêtent pas toujours à un zoom central.
    merci

  8. Pierre Bichet
    Pierre Bichet sur 6 juin 2020 à 22h45

    Il suffit d’ajouter à ton image la propriété transform-origin.
    Par exemple, pour que l’image zoome à partir du haut à gauche : transform-origin: top left;
    Plus d’infos sur cette propriété.

Poster le commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.