Efecto hover desde distintas direcciones

Aunque me ha costado armarlo para que funcionara acá porque hay cosas que no termino de entender bien, la idea de crear efectos hover que muestren contenidos distintos según sea la dirección desde la cual se entra con el cursor, no deja de ser interesante.

Lo básico es empezar con el HTML que no es otra cosa que un DIV donde incluimos cuatro etiquetas SPAN con los textos y una imagen.

<div class=multi-hover>
  <span>hover desde la derecha</span>
  <span>hover desde arriba</span>
  <span>hover desde la izquierda</span>
  <span>hover desde abajo</span>
  <img src="https://lh5.googleusercontent.com/-RAUoNEersrc/UGt18u6HXyI/AAAAAAAACwo/QWa2I1zG7Y0/s400/24_0144.jpg">
</div>

Si se usa en una entrada de Blogger, habrá que tener en cuenta que todo debe ser escrito en una sola línea para evitar los saltos (etiquetas BR) que se agregan por defecto.

El resultado sería esto:

hover desde la derechahover desde arribahover desde la izquierdahover desde abajo

Y el CSS:

<style>

  /* el contenedor y la imagen */
  div.multi-hover {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    /* tuve que establecer la altura para que los textos se centraran verticalmente */
    height: 358px;
    line-height: 358px;
  }
  div.multi-hover img {width: 100%;}

  /* los textos que, por defecto, permanecerán ocultos */ 
  div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    height: 100%;
    opacity: 0; 
    position: absolute;
    text-align: center;
    transition: all 0.3s linear 0s; /* agregar los prefijos para cada navegador */
    width: 100%;
  }

  /* y esto es lo que generará el efecto */

  div.multi-hover span:nth-child(1) { /* desde la derecha */
    background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);
    left: 90%;
    top: 0;
  }
  div.multi-hover span:nth-child(2) { /* desde arriba */
    background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);
    left: 0;
    top: -80%;
  }
  div.multi-hover span:nth-child(3) { /* desde la izquierda */
    background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);
    left: -90%;
    top: 0;
  }
  div.multi-hover span:nth-child(4) { /* desde abajo */
    background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);
    left: 0;
    top: 80%;
  }

  /* los hacemos visibles ... */
  div.multi-hover span:hover {opacity: 1;}

  /* ... moviéndolos horizontalmente ... */
  div.multi-hover span:nth-child(2n+1):hover {left: 0;}
  /* ... o verticalmente ... */
  div.multi-hover span:nth-child(2n):hover {top: 0;}

</style>

Para probar si los valors que colocamos son correctos, lo que conviene es poner opacity: 1; en la regla div.multi-hover span {} y ver el resultado. En este caso, debería verse algo así:

Al dejarlos "visibles", podemos ver como los SPAN se superponen un poco en la imagen que es, justamente, la forma en que serán detectados por el hover. De ese modo, una vez que los hayamos ubicado, tenemos listo el efecto y podemos ocultarlos definitivamente.

REFERENCIAS:demosthenes.info