Dans cet article, je partage une méthode CSS pour appliquer un effet de zoom sur une image au survol de la souris. Cet effet se déclenche au survol de la souris sur l'image ainsi que le contenu de la div entourant l'image.
Effet zoom sur image en CSS : Démonstration
If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered ;)
Effet zoom sur image en CSS : Code CSS / SASS
Vous trouverez ci-dessous le code CSS ainsi qu'une version SASS qui permet d'obtenir l'effet de zoom sur les images au survol.
Code CSS
/**
* ZOOM IMAGE EFFECT ON HOVER // wpRock.fr
*/
.wprock-img-zoom-hover .wprock-img-zoom {
overflow: hidden;
position: relative;
}
.wprock-img-zoom-hover .wprock-img-zoom img {
max-width: 100%;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
.wprock-img-zoom-hover .wprock-img-zoom * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wprock-img-zoom-hover:hover .wprock-img-zoom img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
}Code SCSS
/**
* ZOOM IMAGE EFFECT ON HOVER // wpRock.fr
*/
.wprock-img-zoom-hover {
.wprock-img-zoom {
overflow: hidden;
position: relative;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
transition: all 0.8s;
}
}
&:hover {
.wprock-img-zoom {
img {
transform: scale(1.06);
}
}
}
}
Effet zoom sur image en CSS : Code HTML
Voici un exemple du code HTML qui permet d'implémenter cet effet. Au survol, sur tout élément contenu dans la div ayant la class "wprock-img-zoom-hover", un effet de zoom est appliqué à toutes les images présentent dans la div ayant la class "wprock-img-zoom".
<div class="wprock-img-zoom-hover">
<div class="wprock-img-zoom">
<img src="https://wprock.fr/wp-content/uploads/2018/08/twitter-cover-wprock-520x254.png" alt="wpRock CSS - Zomm effect on image hover">
</div>
<p style="padding: 15px; margin: 0;">If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered ;)</p>
</div>Effet zoom sur image en CSS : Code HTML / CSS
Enfin, je vous propose un exemple complet en fonctionnel ci-dessous.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/**
* ZOOM IMAGE EFFECT ON HOVER // wpRock.fr
*/
.wprock-img-zoom-hover .wprock-img-zoom {
overflow: hidden;
position: relative;
}
.wprock-img-zoom-hover .wprock-img-zoom img {
max-width: 100%;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
.wprock-img-zoom-hover .wprock-img-zoom * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wprock-img-zoom-hover:hover .wprock-img-zoom img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
</style>
</head>
<body>
<div class="wprock-img-zoom-hover" style="width: 100%; max-width: 520px; margin: 100px auto; border: 2px solid lightseagreen;">
<div class="wprock-img-zoom">
<img src="https://wprock.fr/wp-content/uploads/2018/08/twitter-cover-wprock-520x254.png" alt="wpRock CSS - Zomm effect on image hover">
</div>
<p>If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered ;)</p>
</div>
</body>
</html>
