Comment créer un effet de zoom sur une image HTML ?
J'ai une image au format HTML :
<img src="image.jpg" alt="image">
Comment puis-je faire pour créer un effet de zoom sur l'image lorsque je passe la souris dessus ?
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.collaborativejob.com/os.jpg" alt="1FORMATIK">
</div>
</body>
</html>
Démo via le Bac à codes.
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.collaborativejob.com/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.
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.collaborativejob.com/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.collaborativejob.com/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.