Múltiples fondos y efectos hover

Esta es una forma muy particular de utilizar fondos múltiples para crear efectos hover; algo que se le ocurrió a designshack.net donde la técnica está explicada en detalle.

Lo básico es saber que con las nuevas características del CSS3, una etiqueta cualquiera puede tener varios fondos (varias propiedades background) y cada una de ellas puede ser controlada de modo individual. La sintaxis d esto es exactamente igual que la tradicional y los distintos valores, se separan con comas así que una regla como esta, agregaría dos imágenes distintas al mismo contenedor:

#ejemplo {
  background-image: url(imagen_1), url(imagen_2);
  background-position: left 50%, right 50%;
  background-repeat: no-repeat;
  background-color: red;
}

la primera estará a la izquierda, la segunda a la derecha; ambas centradas verticalmente; ninguna de ellas se repetirá y el fondo "sobrante" será de color rojo.

Entendiendo cómo funciona esto de los fondos múltiples y que su posición puede controlarse con background-position, supongamos que tenemos un contenedor que mide 200x200 al que le coloco tres imágenes de fondo; las dos primeras son las que veré por defecto (imagen_fondo) y la tercera es la que permanecerá oculta hasta poner el cursor encima (imagen_oculta).

#ejemplo {
  display: inline-block;
  height: 200px;
  width: 200px;
  transition: all 1s; /* con prefijos para los distintos navegadores */
  background-image: url(imagen_fondo), url(imagen_fondo), url(imagen_oculta);
  background-repeat: no-repeat;
  /* background-position: ???????; */
}

Para que esto funcione, un poco de aritmética. Si queremos que se "abra" horizontalmente:

background-position: -100px 0px, 100px 0px, 0 0;

y si queremos que se "abra" verticalmente:

background-position: 0 -100px, 0 100px, 0 0;

Y la regla del hover sería:

#ejemplo:hover {background-position: -200px 0px, 200px 0px, 0 0;}

o bien:

#ejemplo:hover {background-position: 0 -200px, 0 200px, 0 0;}

Del mismo modo, agregando más fondos, se obtienen distintos efectos:

<style>
.hoverDot {
  display: inline-block;
  height: 200px;
  margin: 10px;
  width: 200px;
  -moz-transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  -ms-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

#slidingDoors {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px 0px, 100px 0px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoors:hover {
  background-position: -200px 0px, 200px 0px, 0 0;
}

#slidingDoorsVert {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: 0 -100px, 0 100px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoorsVert:hover {
  background-position: 0 -200px, 0 200px, 0 0;
}

#breakApart {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
}
#breakApart:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
}

#twistAndShout {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}
#twistAndShout:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
  transform: rotate(0deg);
}
</style>

<div class="hoverDot" id="slidingDoors"></div>
<div class="hoverDot" id="slidingDoorsVert"></div>
<div class="hoverDot" id="breakApart"></div>
<div class="hoverDot" id="twistAndShout"></div>