En esta oportunidad les traigo un genial truco que consta de una imagen con texto sobrepuesto en Blogger,podras ver el truco en funcionamiento a continuacion:
Un glaciar es una gruesa masa de hielo que se origina en la superficie terrestre por acumulación, compactación y recristalización de la nieve, mostrando evidencias de flujo en el pasado o en la actualidad. Su existencia es posible cuando la precipitación anual de nieve supera la evaporada en verano, por lo cual la mayoría se encuentra en zonas cercanas a los polos, aunque existen en otras zonas montañosas. El proceso del crecimiento y establecimiento del glaciar se llama glaciación. Los glaciares del mundo son variados y pueden clasificarse según forma (de valle, de nicho, campo de hielo etc.), régimen climático (tropical, temperado o polar) o condiciones térmicas (base fría, base caliente o politermal).
Un 10% de la Tierra está cubierto de glaciares, y en tiempos geológicos recientes el 30% lo estuvo.Los glaciares del mundo acumulan más del 75% del agua dulce del mundo. En la actualidad 91% del volumen y 84% del área total de glaciares esta en la Antártica, 8% del volumen y 14% del área en Groenlandia sumando el resto de los glaciares 4% del área y menos del 1% del volumen.
Los glaciares son producto del clima y están permanentemente intercambiando masa con otras partes del sistema hidrológico.Los glaciares crecen con la adición de nieve y otros tipos de hielo y pierden masa por fusión de hielo en agua y el desmembramiento de témpanos de hielo.
Para agregar este truco ve a la Edicion 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 Edicion HTML de la entrada y pega el siguiente codigo:
<div class="imagen-con-historia">
<img src="URL-IMAGEN" />
<span>
Escribe el texto que contendrá la imagen acá
</span>
</div>
Via/
Ayuda Bloggers