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￣)╭