/* 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: auto;
  }
  div.multi-hover img {width: 100%;}

  /* los textos que, por defecto, permanecerán ocultos */ 
  div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    height: auto;
    opacity: 0; 
    position: absolute;
    text-align: center;
    transition: all 0.5s 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: 0%;
    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: 0%;
    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;}
  
  
/* ACA ENMPIEZA LA IMAGEN MAS GRANDE */
  
    div.multi-hover2 {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    /* tuve que establecer la altura para que los textos se centraran verticalmente */
    height: 792px;
  }
  div.multi-hover img {width: 100%;}

  /* los textos que, por defecto, permanecerán ocultos */ 
  div.multi-hover2 span {
    color: #FFF;
    font-size: 32px;
    height: auto;
    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-hover2 span:nth-child(1) { /* desde la derecha */
    background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);
    left: 0%;
    top: 0;
  }
  div.multi-hover2 span:nth-child(2) { /* desde arriba */
    background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);
    left: 0;
    top: -80%;
  }
  div.multi-hover2 span:nth-child(3) { /* desde la izquierda */
    background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);
    left: 0%;
    top: 0;
  }
  div.multi-hover2 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-hover2 span:hover {opacity: 1;}

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