zoom css

[ephemerie]

bonjours je veux faire un zoom sur une image quand on passe dessus merci de regarder mon code et de me dire ce qui ne va pas

<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>

et pour le css

.zoom{

height:200px;

weight:200px;

}

.zoom hover{

height:400px;

weight:400px;

}

[AlphaDesign]

Cela t'aidera peut-être: Une galerie d'image avec zoom en pure CSS

Modifié 14 Juin 2006 par virtuelBlue

[ephemerie]

et bien en fait dans ces codes il utilise des ul etc mais moi je veux juste avec un div

[ghost]

Bonjour,

Essaye :

img
{
float: left;
margin: 15px;
}	

.zoom
{
float: left;
position: relative; 
top: 0;
left: 0; 
}

.zoom a
{
margin: 0;
text-decoration: none;
}


.zoom a .large
{
display: block;
position: absolute; 
width: 0px; 
}	  

.zoom a:hover .large
{ 
position: absolute; 
top: 30px;
left: 100px;
width: auto; 
height: auto; 
}

et

	<div class="zoom">
	<a href="#">
	<img src="image_petite.jpg" alt="petit" />
	<img src="image_grande.jpg" alt="grand" class="large" />
	</a>
	  </div>

De mémoire et au saut du lit , à vérifier donc !

[loban]

Ou, si tu veux garder le même principe avec une seule image, il faut que tu modifies directement la taille de l'image et non celle du div.

Essayes un truc comme cela :

.zoom img {
height:200px;
weight:200px;
}

.zoom:hover img {
height:400px;
weight:400px;
}

Sur le HTML, mets aussi le <DIV> à l'intérieur des <TD>

NB : ne pas oublier les 2 points devant le hover.

Modifié 14 Juin 2006 par loban