Texto hover sobre imagen

Hey babies! Hoy traigo un tutorial para usar en la sidebar del blog como bienvenida o lo que se quiera, es un texto que aparece encima de una imagen al poner encima de ratón.

P R E V I E W

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima colocamos el siguiente código:

.caixa1 {

font-family: Trebuchet MS;

font-size: 11px;

width:275px;

height:179px;

padding:5px;

background:url(URL IMAGEN DE FONDO)no-repeat;

}

.descr {

background:rgba(255,255,255,0.9);

width:245px;

height:149px;

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:275px;

height:179px;

padding:5px;

}

Como siempre, todo lo que está en negrita se puede cambiar, el resto, si no entendéis mucho de html es mejor dejarlo tal y como está :)

2. Ahora solo falta añadir un gadget HTML/Javascript con el siguiente código:

<div class="caixa1">

<div class="descr">TEXTO

</div>

</div>

Ahora sólo queda cambiar ese TEXTO por el texto que queráis (*￣3￣)╭

Y hasta aquí el tutorial de hoy. Espero que os haya gustado y si tenéis cualquier duda, no dudéis en poneros en contacto conmigo :3