Comment appliquer un effet zoom sur image en CSS

création de site WordPress

Voici les différents éléments en CSS qui vous permettront d’agrandir légèrement votre image au passage de la souris.  N’hésitez pas à modifier les valeurs pour tester. Vous trouverez ensuite le code complet.

/* la propriété overflow:hidden permet à l’image d’être rognée et de rester dans le contenu*/
.wp-img-zoom-hover .wp-img-zoom {
overflow:hidden;
position: relative;
}

/*définit la vitesse avec la transition sera effectuée*/
.wp-img-zoom-hover .wp-img-zoom img {
max-width: 100%;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}

/*définit la façon dont la hauteur et la largeur totale d’un élément est calculée, ici avec border-box, les bordures sont pris en compte – content-box est le comportement par défaut*/
.wp-img-zoom-hover .wp-img-zoom * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* plus vous augmentez les valeurs plus l’effet zoom sera élevé – attention à avoir une image de base suffisamment grande pour ne pas perdre en qualité*/
.wp-img-zoom-hover:hover .wp-img-zoom img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
}

Le code complet

Intégrez votre image dans votre page . Autour de votre image, indiquez une classe CSS, par exemple :
<div class="wp-img-zoom-hover">
<div class="wp-img-zoom">
<img src="https://monsite.com/back.jpg"/>
</div>
</div>

Dans votre fichier CSS
{
overflow:hidden;
position: relative;
}

.wp-img-zoom-hover .wp-img-zoom img {
max-width: 100%;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}

.wp-img-zoom-hover .wp-img-zoom * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.wp-img-zoom-hover:hover .wp-img-zoom img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
}

Retour haut de page