Añade Imagen Con Multi Efectos Hover Usando Puro Css

En este tutorial te mostrare como añadir un efecto asombroso cuando pones el cursor sobre imagenes en Blogger usando solamente CSS, cuando mueves el mouse en distintas direcciones  (por arriba, por abajo, etc) esto causa una transcision de ventana que se mueve . Este truco cambiara no solamente la apariencia de la imagen al mover el mouse, pero tambien te permitira añadir un texto dentro con una descripcion.
Chequea Articulo Como Añadir Galeria de Images Con Css a tu Blog de Blogger

 Puedes ver el efecto añadido a esta imagen aqui abajo: Trata de mover tu mouse (raton) de izquierda a derecha, derecha a izquierda, de arriba a bajo,y de abajo hacia arriba.

Cursor hacia la derecha Cursor hacia Arriba Cursor hacia la izquierda Cursor hacia Abajo

Añadiendo el Efecto de Hover en Diferentes Direcciones en las Imagenes de Blogger

Lo primero que debes hacer es añadir el siguiente estilo de CSS a nuestra Plantilla:

Paso 1. Entra en tu cuenta de blogger, ir a Plantilla y presione el boton de Editar HTML

Paso 2. Busca la etiqueta </head>  - para encontrarla,da click en cualquier lugar dentro del area de codigos, presiona las teclas CTRL + F keys y escribe en caja de busqueda.Ejemplo aqui abajo.

 Paso 3. Despues que lo encuentres, añade el siguiente codigo de estilo arriba de

</head>
 <style>
  /* The contenedor y 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%;}

/* El texto que, por defecto, esta escondido */
  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%;
  }

/* Y esto es lo que generara el efecto */
  div.multi-hover span:nth-child(1) { /* derecha */
    background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
    left: 90%;
    top: 0;
  }
  div.multi-hover span:nth-child(2) { /* arriba */
    background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
    left: 0;
    top: -80%;
  }
  div.multi-hover span:nth-child(3) { /* izquierda */
    background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
    left: -90%;
    top: 0;
  }
  div.multi-hover span:nth-child(4) { /* abajo */
    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>

Paso 4. Guarde la Plantilla

Luego vamos a anadir el  codigo de HTML este es nada menos que una etiqueta  DIV donde incluimos 4 etiquetas de SPAN con textos y una imagen:

Paso 5. Selecciona la Entradas, y crea una Nueva Entrada, luego da click  la etiquetaen HTML  (1) y pega este codigo dentro de caja de contenido:

<div class=multi-hover>
  <span>Mueve  derecha</span>
  <span>Mueve arriba</span>
  <span>Mueve  izquierda</span>
  <span>Mueve Abajo</span>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH8BSI15j3WvJEJkYz6cW6NcUTOpp_S4JHcEbxR4vGOA2n8neSMGUkIwQyZoMpyJdG2C-SL5fz8Uc50revFxHFSXHHcBWyIh_M2Np5bx8BDdDumgEdRgwWFdaViyVHi6qSfVnAclUt0abF/s320/overlay.jpg">
</div>

Añade tu propio texto/descripcion para "mueve derecha", "mueve arriba", "mueve izquierda" and "mueve abajo" (2) y reemplaza la url en azulcon la URL de tu imagen (3) donde desees aplicar el efecto.

Nota Importante! No haga click en la etiqueta de Redactar, de otra forma el  efecto se perdera.

Step 6. Despues que termines de editar tu entrada,da click Publicar (4)
Chequea Articulo Como Añadir Menu Iluminado a Blog de Blogger
Y ahora a disfrutar de este hermoso y atractivo efecto..

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati