CSS 🔎 Effet de zoom au survol d'une image

Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur whatsapp
Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur whatsapp
Partager sur email

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

wpRock CSS - Zomm effect on image hover

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>
  La newsletter wpRock : Du contenu sur le développement et la création web
Julien .MA Jacob
Développeur WordPress
Julien MA Jacob - Développeur WordPress
🧙‍♂️ Passionné par le web et la programmation avec toujours plein de projets en tête 👨‍💻 | Page à propos
  Discussion autour de l'article
S’abonner
Notification pour
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires