<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>

	<script type="text/javascript" charset="utf-8">

		$(window).load(function(){

			//Initialisation des variables

			var thumbnail = {

				imgIncrease : 100, /* Augmentation du nombre de pixel de l'image pour le zoom) */

				effectDuration : 400, /* Le temps de l'effet */

				/*

				Obtenir la largeur et la hauteur des images.

				Pour cela nous allons utiliser 2 choses :

					 Faire les légendes de la liste de la même taille que les images

					 Remettre les images à la taille normal après l'agrandissement

				*/

				imgWidth : $('.vignette ul li').find('img').width(), 

				imgHeight : $('.vignette ul li').find('img').height() 

			};

			$('.vignette ul li').css({ 

				'width' : thumbnail.imgWidth, 

				'height' : thumbnail.imgHeight 

			});

			//Quand le curseur survol l'image...

			$('.vignette ul li').hover(function(){

				$(this).find('img').stop().animate({

					/* Augmentez la largeur de l'image pour l'effet d'agrandissement*/

					width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,

					/* Nous devons changer la position gauche et supérieure pour avoir l'effet 

					d'agrandissement, donc nous les déplaçons en négatif :

					Position de la moitié de l'imgIncrease */

					left: thumbnail.imgIncrease/2*(-1),

					top: thumbnail.imgIncrease/2*(-1)

					

				},{ 

					"duration": thumbnail.effectDuration,

					"queue": false

				});

				//Montre la légende utilisant l'événement slideDown

				$(this).find('.legende:not(:animated)').slideDown(thumbnail.effectDuration);

			//Quand le curseur ne survol plus la zone...

			}, function(){

				//Trouve l'id "img" et l'anime

				$(this).find('img').animate({

					/* retour à la taille normal*/

					width: thumbnail.imgWidth,

					/* retour à la position normal : Gauche et haut*/

					left: 0,

					top: 0

				}, thumbnail.effectDuration);

				//Cache la légende utilisant l'événement slideUp

				$(this).find('.legende').slideUp(thumbnail.effectDuration);

			});

			

		});

	</script>

<style type="text/css" media="screen">

		body {

			margin:0;

			padding:0;

		}

		.vignette ul { 

			list-style-type: none;

			margin:0px;

			padding:0px;

		}

		.vignette ul li { 

			float:left;

			position:relative;

			overflow:hidden;

		}

		.vignette ul li a img { 

			width:250px;

			position:relative;

			border:none;

		}

		.legende{

			position:absolute;

			bottom:0px;

			left:0px;

			width:100%;

			display:none;

			background:#333;

			opacity:1;

			color:#FFF;

			font-family:Tahoma;

			font-size:14px;

			padding:8px;

		}

	</style>

<div class="vignette">

		<ul>

			<li>

				<a href="#"><img src="image.png" /></a>

				<div class="legende">

                	Ma vignette 1

				</div>

			</li>

		</ul>

		<ul>

			<li>

				<a href="#"><img src="image.png" /></a>

				<div class="legende">

                	Ma vignette 2

				</div>

			</li>

		</ul>

	</div>