Agrandir et réduire une image au passage de la souris
RésoluPlamen13 Messages postés 3 Date d'inscription lundi 16 septembre 2024 Statut Membre Dernière intervention 16 septembre 2024 - 16 sept. 2024 à 17:21
- Agrandir et réduire une image au passage de la souris
- Comment réduire la taille d'un fichier - Guide
- Comment agrandir une image - Guide
- Comment reduire la taille d'une photo - Guide
- Quelle touche pour débloquer la souris ? - Guide
- Image iso - Guide
6 réponses
18 janv. 2024 à 11:56
Bonjour,
Regarde si cela peut te convenir :
https://www.codeur.com/tuto/css/effet-zoom-sur-image-au-hover/
Ou encore :
https://www.w3schools.com/howto/howto_css_zoom_hover.asp
Cdlt.
18 janv. 2024 à 13:52
Bjr T3chNOg3n
Merci pour tes réponses, c'est la solution n°2 qui me convient le mieux,
seulement il faudrait que le carré vert ==> soit en image? est-ce possible?
petite image:90x70
grande image: 600x400
Merci pour ta réponse.
Modifié le 18 janv. 2024 à 14:10
Tu ajoute ça dans ton CSS
.zoom {
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
Et ensuite sur t'a page il suffit de mettre ton image dans une div ayant la classe "zoom"
<div class="zoom"> <img src="image/toto.jpg" width="200" height="200" /> /></div>
Ce n'est qu'un code "type" à adapter. Tu peut bien sur ajuster la taille de tes images
Cdlt.
18 janv. 2024 à 14:35
Re
ça ne fonctionne pas, il n'affiche pas la 1ere partie
il affiche uniquement l'image ci-dessous
<div class="zoom"> <img src="image/toto.jpg" width="200" height="200" /> /></div>
18 janv. 2024 à 15:03
Qu'entend tu par 1ere partie ? Le CSS ?
Serait-il possible de partager t'on code, ou d'avoir un lien vers t'on site avec une des images concerné ? Ca serait plus facile de t'aider ...
18 janv. 2024 à 15:15
Je crois que j'ai oublié de mettre des balises?
Je vais faire ça tranquillement, et je te recontacterais une fois terminé.
A plus.
18 janv. 2024 à 15:34
Il y'a un meilleur code ici où tu peut faire des essais :
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question18 janv. 2024 à 17:56
Merci T3chN0g3n,
J'ai réussi a faire mon animation, encore merci de ton aide, et
peut-être a une prochaine fois?
Salut.
16 sept. 2024 à 17:21
Il faut utiliser par exemple
transform: scale(1.2);
dans la règle du passage de la souris au dessus de ton conteneur que tu veux agrandir.