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; }
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
Partager la publication "Ajouter un effet de zoom ou Ken Burns à ses images"
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.
Julien
sur 28 novembre 2017 à 10h35
Bonjour, je vais le mettre à jour pour expliquer plus précisément 😉
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.
Julien Guiard
sur 23 novembre 2019 à 20h27
Bonjour, tu as ensuite la solution pour l’adapter au module Image de Divi?
ç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
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é.
À la recherche d’un plugin permettant d’aller plus loin avec Divi ? Vous êtes au bon endroit ! Aujourd’hui on vous présente l’extension “Divi Essential” qui possède 63 modules avancés et un total de 500 layouts. Tout est très facile à personnaliser et à styliser car...
Le ratio des images mises en avant des modules "blog" et "portefeuille" ainsi que les vignettes du module "galerie" de Divi ne convient pas toujours à la mise en page que l'on souhaite pour son site.Voyons donc comment le modifier avec quelques lignes de CSS. Le...
C'est une fonctionnalité que l'on croise de plus en plus régulièrement depuis quelques temps sur les sites mobiles et les applications : les menus horizontaux scrollables.Finis les menus hamburgers classiques sur lesquels il faut cliquer pour afficher le menu, la...
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.
Bonjour, je vais le mettre à jour pour expliquer plus précisément 😉
Bonjour, d’accord pas de soucis. ???? ????????
Un grand merci 🙂
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.
Bonjour, tu as ensuite la solution pour l’adapter au module Image de Divi?
ç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
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é.