28172 sujets

CSS et mise en forme, CSS3

Bonjour,
sur ma page j'ai des images reduit manuellement avec width et heigt au format 105 * 76.
leur format d'origine est 289 * 203.

je voudrai que lorsque je passe la souris sur les "mini" les agrandire dans une div floattante (pour ne pas avoir de decalage avec le reste) a leur format d'origine.

Pour info, j'appel mes photos de cette façon :

<img src="mini-biens.php?f=<?php echo $result['photo5'];?>" alt="<?php echo $result['ref'];?>"  width="105" height="76" class="imgbien" />


Merci de votre aide
Modifié par fabrice88 (27 Aug 2010 - 23:03)
Salut,

Je suis un peu novice en css, mais je pense que tu dois pouvoir faire un truc dans ce genre :

déjà, ne pas réduire manuellement (enlever les width et height dans le html), mais avec les css :


.imgbien {

-moz-transform:scale(0.5); /*l'image est afficher à 50% de sa taille réelle*/
-webkit-transform:scale(0.5);
}


et toujours dans les css, prévoir le cas de la souris qui passe (hover) :


.imgbien:hover,  {

	-moz-transform:scale(1); /* l'image est afficher à 100% au survole de la souris*/
	-webkit-transform:scale(1) ;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out; /*l'image met 1s pour passer d'un état à 1 autre*/
}





Voilà, je ne suis sûr de rien, mais ça peut fonctionner (je n'ai jamais essayer de mêler php et css, mais y a pas de raison).

Bonne chance

[f]