Imagen con efecto "opacidad" + texto/mensaje

Pasa el cursor por el icon que se encuentra a continuación {by shiro} & encontraras un texto/mensaje debajo. Es un efecto simple & que puede dar un estilo mas "importante" a algun pequeño mensaje, frase, cita que queramos remarcar o anunciar.

This endless fight, Just don't give up. I won't give up.

Puedes colocar el code en un gadget HTML, en cualquier parte de tu blog.

<style type="text/css">
.texto{
width: 100px; height: 100px; background-color:none;
-webkit-transition: all .5s;
font: 10px arial;
text-transform: uppercase;
color: #777;
background: #000;
}
.imagen{
background-image:url(URL DE TU IMAGEN);
color:none;
position:absolute;
text-align:center;
height:100px;width: 100px;  -webkit-transition: all .5s;
}
</style>
<div class="imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';" style="filter:alpha(opacity=100); opacity: 1;">
</div>
<div class="texto">
<center><br><br>
TU TEXTO AQUI
</center></div>

NOTA:
La imagen debe ser del mismo tamaño que las medidas marcadas en el código las cuales deben ser iguales siempre:

width: 100px; height: 100px;