Box dentro da imagem

[Nícolas Luís Huber 14]

Olá comunidade iMaster, estou querendo fazer algo que vejo em muito sites, como este da imagem: http://img87.imageshack.us/img87/8821/imgoku.png. Não sei como posso projetar a CSS. Até consigo criar o box preto, fazendo o seguinte código:

 

CSS

<div class="imgTips">
<img src="upload/01.png" alt="" title="" />
<div class="titleImgTips">
<a href="#" title="">Lorem Ipsum é simplesmente uma simulação de texto.</a>
</div>
</div>

 

CSS

.imgTips{width: 220px; float: left; margin: 12px 18px 20px 0; position: relative;}
.imgTips img{border: 1px solid #a9a297; -webkit-transition:opacity 0.5s ease-out;	-moz-transition:opacity 0.5s ease-out; -o-transition:opacity 0.5s ease-out;	-ms-transition:opacity 0.5s ease-out;}
.imgTips img:hover{opacity: 0.7;}
.titleImgTips{width: 212px; padding: 10px 5px; background: url(../img/bgTitleImg.png); position: absolute; text-shadow: 1px 1px 1px #000; bottom: 3px; color: #FFF;}
.titleImgTips a{color: #FFF; text-decoration: none;}
.titleImgTips a:hover{text-decoration: underline;}

 

Só que eu queria fazer este box sem escrever o título dentro de uma div, gostaria de pegar a propriedade alt e printar ela dentro da imagem da mesma forma!

[crf_h0m3r 5]

O atributo alt (alternative) serve para mostrar uma informação caso a imagem que você colocou não apareça. Para fins de título em imagens ou tooltips, use a propriedade title. Leia: W3Schools: HTML img alt

 

A respeito da imagem, dá uma olhada aqui