Imagen con texto sobrepuesto en Blogger

Ya hemos visto distintas formas de personalizar nuestras imágenes para perfeccionar la apariencia de éstas, como efectos de zoom, efecto polaroid, galería y otros efectos más.

En esta oportunidad les mostraré una sencilla forma de incluir una historia en las imágenes de tal forma que aparezca cuando se sitúe el mouse sobre la imagen y no sea necesario mostrarlas siempre o mostrarlas en un cuadro de texto por separado.
El resultado es similar al siguiente (Pasa el cursor sobre la imagen):

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

El tutorial:

Paso 1:Añadiendo los atributos:

En "Diseño | Edición HTML" deberás buscar la siguiente línea:

]]></b:skin>

Arriba de esta pega el siguiente código:

.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;
}

Guarda la plantilla y listo.

Paso 2: Usando la imagen con texto:

Cada vez que quieras incluir la imagen con el texto deberás hacerlo mediante el siguiente código:

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

Extra: Descripción en las imágenes:

He hecho una alternativa un poco más minimalista y simple, que sólo muestra la descripción breve de las imágenes tal como lo muestra el siguiente efecto:

Hermosos Glaciares

Paso 1: Añadiendo los estilos:

En el mismo sitio que pegaste el código CSS anterior deberás pegar el siguiente:

.imagen-con-descripcion {
      position: relative;
      display: block;   
      padding:0;
      width: 500px;
      height:375px;
     margin: 0 auto;
}

.imagen-con-descripcion img {
     max-width:500px;
     max-height:375px;
     z-index:1;
     border:none;
     margin:0;
     padding:0;
}

.imagen-con-descripcion span {
    background: #111;
    margin:0;
    opacity:0.8;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 480px;
    padding: 10px;
    border-top: 1px solid #999;
    z-index:10;
}

Paso 2: Usando la imagen con la descripción breve:

Cuando quieras utilizar este efecto deberás pegar el siguiente código en modo "Edición de HTML" en las entradas:

<div class="imagen-con-descripcion">
<img src="URL-IMAGEN">
<span>Breve descripción de la imagen</span>
</div>

Importante:

• No utilices imágenes inferiores a 500px de ancho y 375px de alto.