/* CSS pour le survol des photos */
/* Contraintes: les images doivent être carrées et passent de 100 à 220 */
ul2 li{
	position:relative;float:left;
	list-style-type: none;
	/* width:150px;height:100px; */
	width:225px;height:150px;
	padding:10px;list-style:none;
}
/*permet de créer deux lignes, mais je ne sais pas de quoi*/
/* ul2 li:nth-child(4n){clear:left;}  */
          
/* Paramètres de la transition */
ul2 li a{
	display:block;overflow:hidden;
	/* pour agrandi le cadre à 150, avec déjà la taille augmentée de l'image, avant la transition */
	width:225px;height:150px;
	/* width:150px;height:100px; */
	margin-top:0px;margin-left:0px;
	border:0px solid rgba(0,0,0,0.7);
	transition-property:width,height,margin,z-index,border;
	transition-duration:0.3s;
}

/* Cadre de l'image lorsque la souris est dessus */
ul2 li a:hover{
	position:absolute;
	 /* taille de la boîte qui contient l'image */
	/* width:330px; height:220px; */
	width:500px; height:333px;
	/* margin-top:-50px;margin-left:-50px; */ /* pour que la boîte soit décalée de 50 vers la gauche et vers le haut sans quoi il n'est pas possible de survoler l'image d'à côté */
	margin-top:-75px;margin-left:-125px;
	z-index:100;
	border:3px solid rgba(0,0,0,0.7);
}

/* Image lorsque la souris n'est pas dessus */      
ul2 li a img{
	position:absolute;
	width:225px;height:150px;
	/* width:150px;height:100px; */
	/* z-index:20; */ /* indique que les petites images restent derrière (20 < 100)l'image agrandie */
	transition-property:width,height,z-index;
	transition-duration:0.3s;
}
          
/* Taille de l'image agrandie */
ul2 li a:hover img{
	/* width:330px; height:220px; */
	width:500px; height:333px;
	z-index:100; /* l'image va devant les petites (100 > 20) */
}