par Claire 10-Novembre-2021

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

2 Réponses

par Antoine 10-Novembre-2021

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>
par Teddy 10-Novembre-2021

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>

Questions liées

1 réponse
2 réponses
1 réponse
2 réponses
posée par anonyme 04-Février-2020
1 réponse
2 réponses
posée par anonyme 15-Mars-2019
1 réponse
Bienvenue sur 1FORMATIK, où vous pouvez poser des questions en lien avec l'informatique et internet, et recevoir des réponses d'Antoine et d'autres internautes.

2.6k questions

3k réponses

...