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.1formatik.fr/os.jpg" alt="" class="agrandir">
</body>
</html>