Agrandissement d'image au survol

Bonsoir, en cette belle soirée de vacances je vais vous poster quelques astuces à la demande de Sparrow. La première consiste à appliquer une sorte de zoom à une image. Pour ceci il faudra combiner un peu de code Html et CSS.

Petit exemple :


Tout d'abord prenez l'image et appliquez lui une class, dans notre cas ce sera la class "zoom".

Code:

<div class="zoom">
  <img src="URL DE L'IMAGE" alt="NOM DE L'IMAGE" />
</div>

Code:

.zoom {
height:XXXpx;
margin:auto;
text-align:center;
}

/*Largeur et hauteur image sans survol*/
.zoom img {
width:XXXpx;
height:XXXpx;
-webkit-transition: 0.5s; /*Rendre le mouvement fluide*/
transition: 0.5s;/*Rendre le mouvement fluide*/
}
/*Largeur et hauteur image au survol*/
.zoom img:hover {
width:XXXpx;
height:XXXpx;
}

Voilà c'est tout pour cette première astuce, enjoy !
P.S ~ Cette astuce a été partagée par Sparrow lui même, mais je ne sais plus à quel moment.
P.S² ~ Remarquez que c'est aussi sur ce principe que sont fondées les infobulles...

Code:

<div class="zoom">
<img src="adresse de l'image">
</div>

c'est pas les images postées dans la galerie que je souhaite redimensionner automatiquement en fait mais les images postées sur le forum même