@charset "utf-8";
  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: 292px;
    line-height: 150px;
  }
  div.multi-hover img {width: 100%;}

  /* los textos que, por defecto, permanecerán ocultos */ 
  div.multi-hover span {
	color: #FFF;
	font-size: 16px;
	line-height: 3em;
	height: 151px;
	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(149, 193, 30, 0.6);
    left: 90%;
    top: 0;
  }
  div.multi-hover span:nth-child(2) { /* desde arriba */
    background: none repeat scroll 0 0 rgba(232, 78, 27, 0.6);
    left: 0;
    top: -80%;
  }
  div.multi-hover span:nth-child(3) { /* desde la izquierda */
    background: none repeat scroll 0 0 rgba(232, 78,27, 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;}/* CSS Document */