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

Si l’image ou si cette partie du texte est survolé avec la souris, alors l’effet de zoom se déclanchera ;)

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="">
    </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>

Effet zoom sur image en CSS : 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
  Des livres pour approfondir le sujet

Les liens de commande des livres ci-dessous sont affiliés. En les utilisant pour passer vos commandes, vous soutenez le site 💖

  Hey ! Ces articles aussi devraient vous plaire
  Discussion autour de l'article
Laisser un commentaire

(Votre adresse mail ne sera pas publiée.)