Legenda em Imagens

Um efeito bonito , quando se passa o rato por cima da imagem é apare­cer a sua leg­enda, poupa algum espaço na página e dá um efeito porreiro

HTML

Saiba Mais

Lorem Ipsum
Is sim­ply dummy text of the print­ing and type­set­ting indus­try. Lorem Ipsum has been the industry’s stan­dard dummy text ever since the 1500s, when an unknown printer took a gal­ley.

CSS
.imgefeito {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.imgefeito a {
text-decoration: none;
float: left;
}
.imgefeito a:hover {
cursor: pointer;
}


Estiliza­ção da imagem onde apare­cerá o texto no estado hover, ou seja, quando o mouse estiver sobre a imagem.


.imgefeito a img {
float: left;
margin: 0;
border: none;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}


Em seguida estilizamos o texto Saiba Mais e a “caixa” da leg­enda que será mostrada quando pas­sar­mos o mouse sobre o texto. Perceba o uso de um comando pro­pri­etário da Microsoft, –ms-filter para o efeito fun­cionar no Inter­net Explorer 8.


.imgefeito a .mais {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 1.2em;
color: #fff;
background: #000;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgefeito a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
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: 11px;
padding: 10px;
margin: 0;
width: 615px;
border-top: 1px solid #999;
}
.imgefeito a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}

reti­rado de kadunew.com