Agrandir et réduire une image au passage de la souris
RésoluPlamen13 Messages postés 4 Statut Membre -
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
- Zoom image hover
- Zoom appel video - Guide
- Légende image word - Guide
- Image iso - Guide
- Reduire taille image - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
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.
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