CSS : Effet de zoom au survol d’une image

Partager sur email
Email
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur facebook
Facebook
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

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