.photo {
	/* relative position, so that objects in it can be positioned inside this container */
	position:relative;
	font-family:arial;	
	/* hide those extra height that goes beyong the size of this container */
	overflow:hidden;
	border:5px solid #222;
	width:200px;
	height:100px;
	margin-left:15px;
	margin-bottom:10px;
	float:left;
}	
#logoContainer1{margin-bottom:150px;} /* à modifier si on modifie le nombre de logos */
#logoContainer2{margin-bottom:740px;}
#logoContainer3{margin-bottom:240px;}
#artistes{margin-bottom:730px;}	/* à modifier si on modifie le nombre d'artiste */

.photo .heading, .photo .caption {
	/* position inside the container */
	position:absolute;
	background:#000;
	height:35px;
	width:200px;

	/* transparency for different browsers */
	/* i have shared this in my CSS tips post too */
	opacity:0.8;
	filter:alpha(opacity=80);  
	-moz-opacity:0.8;
	-khtml-opacity:0.8;  

}

.photo .heading { 
	
	/* hide it with negative value */
	/* it's the height of heading class */
	top:-50px;
}

.photo .caption { 		
	/* hide it with negative value */
	/* it's the height of bottom class */
	bottom:70px;		
}


/* styling of the classes*/
.photo .heading span {

	color:#26c3e5;	
	top:-50px;
	font-weight:bold;
	display:block;
	padding:5px 0 0 10px;
}

.photo .caption span{
	color:orange;	
	font-size:9pt;
	display:block;
	padding:5px 10px 0 10px;
}