Agrandir et réduire une image au passage de la souris
RésoluPlamen13 Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai une image sur ma page web que je voudrais agrandir et réduire lorsque
je passe la souris.
D'avance merci
Windows / Opera 95.0.0.0
- Agrandir et réduire une image au passage de la souris
- Comment réduire la taille d'un fichier - Guide
- Reduire taille image - Guide
- Comment agrandir une image - Guide
- Quelle touche pour débloquer la souris ? - Guide
- Reduire clavier iphone - Guide
6 réponses
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.
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.
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.
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>
Je crois que j'ai oublié de mettre des balises?
Je vais faire ça tranquillement, et je te recontacterais une fois terminé.
A plus.
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 question