Comment agrandir une image HTML quand on passe la souris dessus ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-11-10 12:56:42

Question

Bonjour, je voudrais agrandir une image HTML quand la souris passe dessus, et si possible avec un effet progressif, merci.

Réponse

Pour agrandir une image HTML quand on passe la souris dessus, vous pouvez utiliser la pseudo-classe CSS :hover pour détecter le passage de la souris, puis les propriétés CSS width et height pour spécifier la taille de l'image.

Pour l'effet progressif vous pouvez utiliser la propriété CSS transition.

Voici un exemple pour agrandir une image HTML avec un effet progressif :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment agrandir une image HTML quand on passe la souris dessus ?</title>
</head>
<body>
<style>
.agrandir {
 width: auto;
 height: 100px;
 transition: height 3s ease 200ms, width 3s ease 200ms;
}

.agrandir:hover {
 width: auto;
 height: 200px;
}
</style>
<img src="https://www.collaborativejob.com/os.jpg" alt="" class="agrandir">
</body>
</html>

Réponse

En reprenant le même exemple que Antoine, vous pouvez également utiliser la propriété CSS transform qui a l'avantage de na pas décaler les éléments qui sont autour de l'image.

<style>
.agrandir {
 width: auto;
 height: 100px;
 margin: 0 auto;
 transition: transform .4s;
}

.agrandir:hover {
 transform: scale(1.5);
}
</style>