Otra galería de imágenes con CSS3

Esta es una galería relativamente sencilla donde sólo se usa CSS y funcionará bastante bien en los navegadores modernos, incluyendo IE8 aunque con ciertas diferencias ya que cada uno de ellos tiene sus propias características y aplica las nuevas propiedades como se le da la gana.

El HTML es mínimo, usamos una lista donde colocamos dos imágenes, una con la clase mini contiene la miniatura que es la visible por defecto y otra, con la clase pic contiene la imagen a mostrar:

<div id="galeria">
  <ul>
    <li><img src="URL_miniatura1" class="mini" /><img src="URL_imagen1" class="pic"/></li>
    <li><img src="URL_miniatura2" class="mini" /><img src="URL_imagen2" class="pic"/></li>
    <li><img src="URL_miniatura3" class="mini" /><img src="URL_imagen3" class="pic"/></li>
    .......
  </ul>
</div>

Y ahora, el CSS que va antes de </head> y que deberíamos modificar para adaptarlo a nuestras necesidades:

<style>
#galeria { /* este es el div que contiene la galería */
  background: #101921;
  border: 10px solid #505961;
  height: 300px;
  position: relative;
  width: 600px;
  margin: 30px auto;
  overflow: visible;
}
#galeria ul { /* la lista */
  margin: 0;
  padding: 0;
  text-align: center;
}
#galeria ul li { /* cada item de la lista */
  display: inline-table;
  list-style: none;
  padding: 10px;
  vertical-align: middle;
}
#galeria ul li .pic { /* la imagen normal */
  background-color: #000;
  border: 2px solid #000;
  left: 130px;
  padding: 10px;
  position: absolute;
  top: 15px;
  visibility:hidden;
  -moz-box-shadow: 0 0 20px #ABC inset;
  -webkit-box-shadow: 0 0 20px #ABC inset;
  box-shadow: 0 0 20px #ABC inset;
}
#galeria ul li .mini:hover { /* efecto sobre las miniaturas */
  cursor: pointer;
}
#galeria ul li:hover .pic { /* efecto sobre las imágenes */ 
  visibility: visible;
}
</style>

• 
• 
• 
• 
• 
• 

REFERENCIAS:admixweb.com