Webmaster Hub > zoom css

Version complète: sur le forum Webmaster Hub : zoom css

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

ephemerie

mercredi 14 juin 2006 à 04:52

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

et pour le css

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

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

AlphaDesign

mercredi 14 juin 2006 à 06:30

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

ephemerie

mercredi 14 juin 2006 à 06:38

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

ghost

mercredi 14 juin 2006 à 08:32

Bonjour,

Essaye :

CODE

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

CODE

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

loban

mercredi 14 juin 2006 à 08:37

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 :

CODE

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.