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 !

 

D'autres tutoriels pouvant vous intéresser: