Código arriba de </head>
<style>Código ejemplo de la imagen:
.imgteaser {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.imgteaser a {
text-decoration: none;
float: left;
}
.imgteaser a:hover {
cursor: pointer;
}
.imgteaser a .more {
position: absolute;
right: 20px;
bottom: 40px;
font-size: 1.0em;
color: #fff;
background: #000;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
display: block;
font-size: 1em;
padding: 10px;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 11px;
left: 1px;
margin: 0;
width: 99%;
border-top: 2px solid #fff;
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}
.imgteaser a .desc { display: none; }
.imgteaser a:hover .more { visibility: hidden;}
</style>
<div class="imgteaser">
<a href="http://es.wikipedia.org/wiki/La_Gioconda" target="_blank">
<img border="0" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Mona_Lisa.jpeg/300px-Mona_Lisa.jpeg" alt="" />
<span class="more">» Leer descripción</span>
<span class="desc">
<strong>La Gioconda</strong>
Leonardo da Vinci, 1503-1506<br>
Óleo sobre tabla - Renacimiento<br>
77 cm × 53 cm<br>
Museo del Louvre, París, Francia
</span>
</a>
</div>
Leer Importante...
Enlaza el blog ...
Ultimos comentarios
Me puedes explicar un poco más cómo hacer ésto?
Entiendo que hay que copiar el primer código en la plantilla de blogger, arriba de < / head >. Pero, ¿y el texto de cada imagen? El de la Gioconda en éste caso.
hidden, según donde lo quieras poner, puede ser en un gadget o en una entrada.
Cambia el link: http://es.wikipedia.org/wiki/La_Gioconda
La imagen: http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Mona_Lisa.jpeg/300px-Mona_Lisa.jpeg
El título de la descripción: La Gioconda
Y la descripción: Leonardo da Vinci, 1503-1506
Óleo sobre tabla - Renacimiento
77 cm × 53 cm
Museo del Louvre, París, Francia
En una entrada tal ves tengas que quitar el salto de línea <br>
@ Vku:
Genial Vku!! muchísimas gracias por el aporte y la rapidez! ;)
Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.
Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.
Nota: solo los miembros de este blog pueden publicar comentarios.