Comment créer un effet de zoom sur une image HTML ?

répondu par Antoine 25-Octobre-2020

Vous pouvez utiliser la propriété CSS transform pour créer un effet de zoom sur une image HTML, et la pseudo-classe hover pour détecter lorsque le curseur de la souris survole l'image.

Voici un exemple pour créer un effet de zoom sur une image HTML en CSS :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment créer un effet de zoom sur une image HTML en CSS ?</title>
<style>
.zoom {
width: 200px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
.zoom img {
width: 100%;
transition: 0.5s all ease-in-out;
}
.zoom:hover img {
transform: scale(2.0);
}
</style>
</head>
<body>
<div class="zoom">
<img src="https://www.1formatik.fr/os.jpg" alt="1FORMATIK">
</div>
</body>
</html>

Démo via le Bac à codes.

répondu par Antoine 25-Octobre-2020

Vous pouvez également utiliser JavaScript et des boutons HTML pour augmenter et diminuer l'effet de zoom de l'image.

Pour cela vous pouvez utiliser JavaScript et clientHeight pour récupérer la hauteur de l'image, puis ensuite ajouter ou enlever des pixels avec la propriété height :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment créer un effet de zoom sur une image HTML en JavaScript ?</title>
</head>
<body>
<img src="https://www.1formatik.fr/os.jpg" id="zoom" alt="1FORMATIK">
<br>
<button type="button" onclick="augmenter_zoom()">Augmenter le zoom</button> 
<button type="button" onclick="diminuer_zoom()">Diminuer le zoom</button> 
<script> 
function augmenter_zoom()
{ 
var image = document.getElementById("zoom"); 
var hauteur = image.clientHeight; 
image.style.height = (hauteur + 50) + "px"; 
} 
function diminuer_zoom()
{ 
var image = document.getElementById("zoom");
var hauteur = image.clientHeight;
image.style.height = (hauteur - 50) + "px";
} 
</script> 
</body>
</html>

Démo via le Bac à codes.

répondu par Zyz 05-Février-2022

Pour réaliser un effet de zoom sur une image on peut utiliser JavaScript et du code CSS.

On peut ainsi créer un effet de zoom avec une loupe au survol de la souris, on duplique l'image d'origine pour le placer dans un autre élément superposé, puis on définit l'attribut tailles de cette nouvelle image sur une valeur supérieure pour obtenir une source de résolution plus élevée, et donc un effet de zoom.

Voici comment créer un effet de zoom avec une loupe sur une image :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment créer un effet de zoom avec loupe sur une image HTML ?</title>
<style>
#conteneur_image {
  width: 500px;
  height: auto;
  position: relative;
}

#img_original {
  width: 100%;
  height: auto;
}

#conteneur_image:hover, #conteneur_image:active {
  cursor: zoom-in;
  display: block;
}

#conteneur_image:hover #img_zoom, #conteneur_image:active #img_zoom {
  opacity: 1;
}
#img_zoom {
  width: 250px;
  height: 250px;
  background: url('https://www.1formatik.fr/images/demo/paris.png') no-repeat transparent;
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  pointer-events: none;
  position: absolute;
  opacity: 0;
  border: 2px solid black;
  z-index: 99;
  border-radius: 100%;
  display: block;
  transition: opacity .2s;
}
</style>
</head>
<body>   
<div id="conteneur_image">
  <img src="https://www.1formatik.fr/images/demo/paris.png" id="img_original">
  <div id="img_zoom"></div>
</div>
<script>
let loupe = function (){
  document.querySelector('#conteneur_image').addEventListener('mousemove', function(e) {
  
    let image_original = document.querySelector('#img_original'),
        image_zoom = document.querySelector('#img_zoom'),
        style = image_zoom.style,
        x = e.pageX - this.offsetLeft,
        y = e.pageY - this.offsetTop,
        imgWidth = image_original.offsetWidth,
        imgHeight = image_original.offsetHeight,
        xpourcentage = ((x/imgWidth) * 100),
        ypourcentage = ((y/imgHeight) * 100);

    if(x > (.01 * imgWidth)) {
      xpourcentage += (.15 * xpourcentage);
    };

    if(y >= (.01 * imgHeight)) {
      ypourcentage += (.15 * ypourcentage);
    };

    style.backgroundPositionX = (xpourcentage - 9) + '%';
    style.backgroundPositionY = (ypourcentage - 9) + '%';

    style.left = (x - 180) + 'px';
    style.top = (y - 180) + 'px';

  }, false);
}();
</script>
</body>
</html>

Démo via cette page.

Comment créer un effet de zoom sur une image HTML ?

Votre réponse

Previsualisation

3 Réponses

Votre commentaire sur cette réponse

Previsualisation

Votre commentaire sur cette réponse

Previsualisation

Votre commentaire sur cette réponse

Previsualisation

Questions liées

Mots clés les plus utilisés