Mur d'image, agrandissement au survol

Bonjour,

Je cherche à faire un mur d'image. Chaque image s'agrandit au survol de la souris.

J'ai fait un petit bout de CSS qui fonctionne (si on oublie le décalage de toutes les images au survol de l'une d'entre elle... ), par contre j'aimerais afficher l'image à sa taille originale, ce que mon code ne permet pas de faire.

HTML :
<span class="images-vrac">
<img src="image.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image5.jpg" />
</span>


CSS
.images-vrac {
position: relative;
width: 40px;
height:40px;
text-align:center;
}
.images-vrac img {
width: 40px;
height:40px;
}
.images-vrac img:hover {
position: absolute;
width: 80px;
height: 80px;
z-index: 1000;
}

Pourriez-vous m'aider à le perfectionner SVP ?

Bonjour,

Ce genre d'effet, pour être à peu près satisfaisant et efficace, devra être géré avec CSS d'une part et JavaScript d'autre part.

Par exemple, au survol d'une image, tu peux générer une nouvelle image (manipulation du DOM avec JavaScript) positionnée en absolu (coordonnées à calculer en JavaScript aussi), et éventuellement réaliser un effet d'animation avec une augmentation progressive de la taille de l'image.

Cela risque d'être assez difficile à réaliser, cependant, surtout si tes connaissances en JavaScript sont faibles ou nulles.