Efecto Leyenda Deslizante en las Imagenes

Un efecto muuuuuuy lindo para imagenes, donde les puedes poner una leyenda o descripción, que será visible al pasar el cursor sobre la imagen ^^

Ve a Plantila - Edición de HTML 
Si tienes plantilla blogger: con ctrl + f busca ]]>

 
Si tienes plantilla clásica/blogskin: con ctrl + f busca 


Justo arriba del código que tengas según tu plantilla, pega el siguiente código... 

figure { display: block; position: relative; float: left; overflow: hidden; margin: 0 10px 10px 0; -moz-transition: all 0.6s ease; } figcaption { position: absolute; margin-bottom: 10px; background: #000000; background-color:#000000; color: #FFFFFF; padding: 3px 3px; opacity: 0; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; } figure:hover figcaption { opacity: 0.9; } figure:before { content: "?"; position: absolute; font-weight: 800; background: #ff55a9; background: #ff55a9; text-shadow: 0 0 5px white; color: #FFF; width: 24px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 24px; -moz-transition: all 0.6s ease; opacity: 0.75; } figure:hover:before { opacity: 0; } .cap-left:before { bottom: 10px; left: 10px; } .cap-left figcaption { bottom: 0; left: -30%; } .cap-left:hover figcaption { left: 0; }

#ff55a9: Color del botón "?" 
#000000: Color del fondo de la leyenda. 
Guardas los cambios! ^^Para usar el efecto en la imagen de un gadget o una entrada, usa el siguiente código... 

<figure class="cap-left"><img src="Url de la imagen" alt="" /><figcaption>TEXTO AQUI</figcaption></figure>

Reemplaza "url de tu imagen" por la imagen la cual quieres que tenga el efecto de la leyenda. 
En "TEXTO AQUI" pones el texto que quieres que diga en la leyenda. 

Guardas todos los cambios y listo! :D 

Si tienes alguna duda o problema,

comenta en esta entrada!