Cuadro de texto con la descripción en imagen

» Leer descripción
La GiocondaLeonardo da Vinci, 1503-1506
Óleo sobre tabla - Renacimiento
77 cm × 53 cm
Museo del Louvre, París, Francia

Código arriba de </head>

<style>
.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>

Código ejemplo de la imagen:

<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">&raquo; 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>