CSS : Effet de zoom au survol d’une image

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

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);
			}
		}
	}
}

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="">
    </div>
    <p>Si l'image ou si cette partie du texte est survolé avec la souris, alors l'effet de zoom se déclenchera ;)</p>
</div>

Code HTML / CSS

Enfin, je vous propose un exemple complet en fonctionnel ci-dessous.

<!DOCTYPE html>
<html lang="fr-FR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>wpRock CSS - Effet de zoom au survol sur une image </title>

        <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="">
            </div>
            <p>Si l'image ou si cette partie du texte est survolé avec la souris, alors l'effet de zoom se déclanchera ;)</p>
        </div>
        
    </body>
</html>
Julien MA Jacob
Développeur WordPress
Passionné par le web et la programmation avec toujours plein de projets en tête