Mil Trucos Blogger

Impresionante Multi efecto Hover en las imágenes

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
Ya he compartido en múltiples ocasiones efectos para las imágenes, pero estoy seguro que ninguno es como el de hoy, el efecto de es espectacular, y es que al poner el cursor sobre la imagen, dependiendo de la posición en la se ponga el cursor (superior, inferior, izquierda, derecha) se muestra un hermoso efecto hover de diferente color.

Puedes ver este maravilloso efecto que esta hecho solo con CSS en la siguiente imagen


Para agregar este truco a tu blog ve a Plantilla, Editar HTML, y pega antes de </head>  lo siguiente:

<style>
  /* Contenedor de la imagen */
  div.multi-hover {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    height: 358px;
    line-height: 358px;
  }
  div.multi-hover img {width: 100%;}
/* Los Textos que se ocultan */
  div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    font-weight: bold;
    height: 100%;
    opacity: 0;
    position: absolute;
    text-align: center;
    transition: all 0.3s linear 0s;
    width: 100%;
  }
/* Código que genera el efecto */
  div.multi-hover span:nth-child(1) { /* right */
    background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
    left: 90%;
    top: 0;
  }
  div.multi-hover span:nth-child(2) { /* top */
    background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
    left: 0;
    top: -80%;
  }
  div.multi-hover span:nth-child(3) { /* left */
    background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
    left: -90%;
    top: 0;
  }
  div.multi-hover span:nth-child(4) { /* bottom */
    background: none repeat scroll 0 0  rgba(97, 181, 115, 0.6);
    left: 0;
    top: 80%;
  }
  div.multi-hover span:hover {opacity: 1;}
  div.multi-hover span:nth-child(2n+1):hover {left: 0;}
  div.multi-hover span:nth-child(2n):hover {top: 0;}
</style>

Ahora en el editor HTML de una entrada o pagina pega lo siguiente:

 <div class=multi-hover>
  <span>Efecto parte derecha</span>
  <span>Efecto parte superior</span>
  <span>Efecto parte izquierda</span>
  <span>Efecto parte inferior</span>
  <img src="URL IMAGEN">
</div>

Reemplaza lo que esta en color azul por lo que se indica en cada caso, con esto ya hemos terminado este tutorial.

Cuéntanos querido lector que te ha parecido este espectacular truco.

Vía/ HelpBlogger

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

4 Comentarios

  1. agosto 3, 2013    

    Genial blog wooow oie como puedes hacer esto q salga este formulario

  2. noviembre 25, 2013    

    Precioso efecto y muy buen blog !! Enhorabuena por tu trabajo.

    • noviembre 25, 2013    

      Victor como tu dices, este es un gran efecto.

      Gracias por comentar y saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *




Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo