Imagen con texto sobrepuesto en Blogger

En esta oportunidad les traigo un genial truco que consta de una imagen con texto sobrepuesto en Blogger:

Para agregar este truco ve a la Edición HTML de tu blog y antes de ]]></b:skin> agrega lo siguiente:

.imagen-con-historia {
    position: relative;
    display: block;  
    padding:0;
    width: 500px;
    margin: 0 auto;
}
.imagen-con-historia img {
    max-width:500px;
    max-height:auto;
    z-index:1;
    border:none;
    margin:0;
    padding:0;
}
.imagen-con-historia span {
    background: #111;
    opacity:0;
    margin:0;
    -moz-transition: 400ms;
    -webkit-transition: 400ms;
    -o-transition:400ms;
    transition: 400ms;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    padding: 10px;
    border-top: 1px solid #999;
    z-index:10;
}
.imagen-con-historia span:hover {
    opacity:.55;
}

Guardas los cambios.

Ahora cada vez que quieras utilizar una imagen con texto ve a la Edición HTML de la entrada y pega el siguiente código:

<div class="imagen-con-historia">
<img src="URL-IMAGEN" />
<span>
Escribe el texto que contendrá la imagen acá
</span>
</div>

Vía/Ayuda Bloggers