Mosaico de imágenes

Hay muchas maneras de optimizar tu página haciendo un tratamiento de las imágenes, una de ellas es la de reducir un grupo de imágenes en una sola creando así un mosaico.

Por medio de css podremos mostrar dichas imágenes de la forma en que lo necesitemos.

Una posible práctica sería la de una lista de enlaces (con imagen) que al pasar el ratón sobre ellos cambien a otra imagen.

Como ejemplo usaremos una plantilla con las siguientes dimensiones:

Para ello dispondremos de un mosaico con parejas opuestas.

En la fila inferior la lista de imágenes en blanco y negro.

Y en la fila superior la misma lista de imágenes, esta vez a color.

Es importante que las dos filas mantengan las mismas proporciones.

<div id="mosaico">
  <div class="enlace1">
    <a href="#">
      <span class="enlace1"></span>
    </a>
  </div>
  <div class="enlace2">
    <a href="#">
      <span class="enlace2"></span>
    </a>
  </div>
  <div class="enlace3">
    <a href="#">
      <span class="enlace3"></span>
    </a>
  </div>
</div>

En el código html anterior hay una lista de elementos "span" encapsulados en "div", ambos compartiendo una misma clase ("enlace1", "enlace2", "enlace3").
Y todo el conjunto anterior a la vez contenido en un div con un identificador ("mosaico").

.enlace1, .enlace2, .enlace3 {
  background-image: url('../img/mosaico.png');
  background-repeat: no-repeat;
  height: 100px;
  float: left;
}
#mosaico div {
  background-position-y: -100px;
}
#mosaico span:hover {
  opacity: 1;
}
#mosaico span {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
#mosaico span:hover {
  opacity: 1;
}
.enlace1 {
  background-position-x: 0px;
  width: 100px;
}
.enlace2 {
  background-position-x: -100px;
  width: 120px;
}
.enlace3 {
  background-position-x: -220px;
  width: 80px;
}

En el css anterior comenzamos aplicando el mismo fondo para cada una de las clases, es decir, los elementos "div" y "span" dentro del contenedor principal.
Además especificamos la altura de la imagen y flotamos el contenido (derecha o izquierda).

Asignamos una posición vertical a los elementos "div" cuyo valor será la altura de la imagen con valor negativo (en este caso -100px).

Los "span" por defecto están ocultos y solamente los mostramos cuando pasamos el ratón sobre las imágenes (con una transición de css3).

Por último asignamos un ancho para cada una de las imágenes a través de sus clases (.enlace1, .enlace2, ... ) y variamos su posición horizontal acumulando en valor negativo el ancho de las imágenes que están a su izquierda en el mosaico.