Efecto de descripción ☾

¡Hola! ¿Que tal? :)

Les traigo un efecto muy lindo para la descripción de nuestros blogs. (Cuando pasas el cursor por la imagen sale una nota). En lo personal me encanto. 

Para que lo tengas en tu blog.. sigue estos sencillos pasos.

 Plantilla | Editar HTML | CTRL + F

Buscamos:

]]></b:skin>

Encima de ese código, ponemos el siguiente.

.caixa1 {
width:230px;
height:150px;
padding:5px;
background:url(http://static.tumblr.com/koam7dd/Sr7nko391/teste_hover.png)no-repeat;
}
.descr {
background:rgba(255,255,255,0.9);
width:200px;
height:120px;
padding:10px;
opacity:0;
text-align: justify;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.caixa1:hover .descr, .box2:hover .descr { opacity:1; }
.outer {
border:1px solid #ddd;
width:230px;
height:150px;
padding:5px;
}
.top { margin:0 0 10px px; }

Rojo: La URL de la imagen. (Trata de que sea del tamaño de la cajita de descripción)

- Ahora nos dirigimos a:

Diseño / Añadir gadget / HTML/JavaScript

<div class="outer top">
<div class="caixa1">
<div class="descr">¡Hola! bienvenido a mi blog, donde comparto: tutoriales, recursos, tips, ayudas, packs y otras cosas. Si te gusto el blog no olvides seguirlo para que no te pierdas ninguna entrada.</div>
</div>
</div>

Azul: El texto/nota, que quieras poner.

Eso es todo, espero les guste y lo pongan en su blog <3

Créditos: gnhm

Hasta luego ♥