CSS 🔎 Effet de zoom au survol d’une image

Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Article CSS - Effet de zoom sur une image au survol par @wpr0ck
Article CSS - Effet de zoom sur une image au survol par @wpr0ck
Article CSS - Effet de zoom sur une image au survol par @wpr0ck
Article CSS - Effet de zoom sur une image au survol par @wpr0ck
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.

/**
 * 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);
}
/**
 * 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>
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
  Discussion autour de l'article
avatar
  S’abonner  
Notifier de