Zoom image
Bonjours je souhaite faire un zoom sur une image au passage de la souris, merci de regarder mon code car ca ne fonctionne pas
pour le html
<div class="zoom"> <td><center><img src="r2r-img-111-1.jpg" width="90" height="90" align="absmiddle" background-position="center"/></center></td>
<!--va chercher l'image et la taille--></div>
pour le css
.zoom{
height:200px;
weight:200px;
}
.zoom hover{
height:400px;
weight:400px;
}
pour le html
<div class="zoom"> <td><center><img src="r2r-img-111-1.jpg" width="90" height="90" align="absmiddle" background-position="center"/></center></td>
<!--va chercher l'image et la taille--></div>
pour le css
.zoom{
height:200px;
weight:200px;
}
.zoom hover{
height:400px;
weight:400px;
}
A voir également:
- Zoom image
- Image iso - Guide
- Appel zoom - Guide
- Reduire taille image - Guide
- Légende image word - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
1 réponse
Ca ne va pas marcher... ton code va agrandir le conteneur mais pas l'image...
L'idéal est d'avoir une seconde image zoomée et de l'afficher lorsque la souris passe sur le DIV.
Une solution peut consister à définir un DIV vide, de la taille de ton image avec comme fond l'image en question et le même avec :hover avec l'image zoomée et la bonne taille :
Pour le css
L'idéal est d'avoir une seconde image zoomée et de l'afficher lorsque la souris passe sur le DIV.
Une solution peut consister à définir un DIV vide, de la taille de ton image avec comme fond l'image en question et le même avec :hover avec l'image zoomée et la bonne taille :
<div class="zoom"><!--va chercher l'image et la taille--></div>
Pour le css
.zoom{
height:90px;
width:90px;
background: white url("r2r-img-111-1.jpg");
}
.zoom:hover {
height:400px;
width:400px;
background: white url("r2r-img-111-1-zoom.jpg");
}
