WebNioub

Vous souhaitez avoir la possibilité de zoomer sur des petites images de votre site internet, et ce sans ouvrir de nouvelles fenêtres en “popup” polluant la navigation ? … Laissez-vous guider par les CSS !

Comment faire ?

1) Préparer 4 vignettes

D’une taille exemple de 300 x 300 pixels, nommées “1.jpg”, “2.jpg”, “3.jpg” et “4.jpg”, et se trouvant dans un dossier appelé “img”.

2) Intégrer le code CSS suivant :

Css :

.vignette {
	position:relative;/*element est pris en compte dans l'espace du contenu*/
	width:150px;/*idem largeur des petites images*/
	height:150px;/*idem hauteur des petites images*/
	float:left;
	padding-right:30px;/*espace entre les images – l'épaisseur des cadres*/
	display:block;
	z-index:1;
	}
 
.vignette img {
	position:relative;/*element est pris en compte dans l'espace du contenu*/
	width:150px;/*largeur des petites images*/
	height:150px;/*hauteur des petites images*/
}
 
.vignette:hover { z-index:2; }
 
.vignette:hover img {
	position:absolute;/*element est pris en compte dans l'espace du contenu*/
	width:300px;/*largeur des grandes images*/
	height:300px;/*hauteur des grandes images*/
  	top: -75px;/*un quart de largeur des grandes images*/
  	left: -75px;/*un quart de hauteur des grandes images*/
	border:10px solid #FF0000;/*cadre sur les grandes images*/
	z-index:2;
}
 
img {border:10px solid #FF0000;/*cadre sur les petites images*/}
 
.clear { clear:both; }

3) Et voici le code html de la galerie de 4 vignettes zoomable

Html :

<a class="vignette"><img src="1.jpg" alt="" /></a>
<a class="vignette"><img src="2.jpg" alt="" /></a>
<a class="vignette"><img src="3.jpg" alt="" /></a>
<a class="vignette"><img src="4.jpg" alt="" /></a>