Tutorial:Efecto de Imagen con cuadro de Texto ♥

jaja,me da risa esa imagen ,ese gatito ,esa vida que tiene .Bueno otro efecto en la Imagen es al pasar el cursor sobre la imagen tiene aparece un cuadro de texto,clic en :

Vista Previa 

Si les gusta sigan los pasitos :
Para Plantilla Basica:Ir a Diseño /Añadir un nuevo gadget /Javascript
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo en el lugar que desee que aparesca

<style>
.est {width:200px; height:150px; overflow:hidden; border:5px solid #2A74DC; -webkit-transition-duration:0.7s; margin-top:3px}
.estr {width:200px; height:150px; -webkit-transition-duration:0.7s; position:absolute; overflow:hidden}
.est:hover .text {margin-top:50%; -webkit-transition-duration:0.7s; opacity:0.8}
.text {background-color:#fff; color:#2A74DC; font:arial 12px; text-align:center;border: 3px
solid #2A74DC; width:200px; margin-top:0px; padding:5px; -webkit-transition-duration:0.7s; opacity:0}</style>
<div class="est">
<img class="estr" src="Url de la Imagen">
<div class="text">Texto aqui</div>
</div>

Para Personalisar los colores y otras cosas mas :
#2A74DC:Color del borde de la imagen
#fff:Fondo del cuadro del texto
#2A74DC:Color de la letra del cuadro de texto
#2A74DC:Color del borde del cuadro de texto
50%:puedes bajarlo si quieres que aparesca mas ariba el cuadro de texto ,por ejemplo 10% estara mas ariba el cuadro de texto.
solid:Pueden cambiar el tipo de borde  de la cajita y de la imagen ,aqui les dejo donde pueden conseguir tipos de bordes clic aqui (Es el blog de Annyz *-*)
y lo demas lo remplazan por lo que indica y  listo ponen guardar ,eso es todo