.container {
	margin: 0 auto;
	width: 960px;
}
.gallery {
	/* esto es comun para los ul ya que vienen con cierto margin y padding */
	padding: 0;
	margin: 0;
}
.gallery li {
	/* Esto es para posicionar los li uno al lado del otro */
	float: left;
	/* Para definir cuantos quiero por columna */
	width: 100px;
	/* comun cuando usamos li en su uso no convencional: quitamos los bullets */
	list-style: none;
	/* Para separar un poco las imagenes */
	padding: 10px;
}
.gallery li a {
	/* es un pequeño trick que mejora al elemento */
	display: block;
	
	position: relative;
}
.gallery li a img {
	/* Limitamos la imagenes para que no se salgan del sus contenedores */
	max-width: 100%;
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	
	/* Para no tener un espacio abajo de las imagenes por su display en linea le ponemos esto */
	display: block;
}
.gallery li a:hover img {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
.gallery li a:hover span {
	display: block;
}
.gallery li a span {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.3);
	color: white;
	text-align: center;
	display: none;
	
	/* Para centrar texto a lo alto se utiliza el line height = alto total */
	line-height: 244px;
}

.gallery ul{
 list-style-type: none;
}