Css yardım

http://prntscr.com/59mcpv

Arkadaşlar yukarıda eklediğim resimdeki gibi birşey yapmaya çalışıyorum ama beceremedim.

Herhangi bir resmin alt köşesine css ile şeffat bant çekip üzerine yazı yazmak istiyorum.
Şeffaf bant üzerine gelincede hover efekti getirmek istiyorum.
Biri yardım edebilir mi acaba?

Lütfen biri yardım edebilirmi

<div class="resim">
<img src="1.png" alt="Avatar" width="494" height="184" />
<span class="altBilgi">Test 1-2-3</span>
</div>

.resim {position: relative;width: 494px;height: 184px;}
.resim > span.altBilgi {position: absolute;width: 494px;height: 30px;left: 0;bottom: 0;background: rgba(0,0,0,.5);color: #fff;display: block;text-align: center;line-height: 30px;font-size: 20px;text-transform: uppercase;display: none;}
.resim:hover span.altBilgi {display: block;}

Hocam çok teşekkür ederim, yalnız resmin üzerine gelmeden şeffaf siyah bant ve beyaz yazı olucaktı, üzerine gelince bant şeffaf kırmızı, yazıda beyaz rengini koruyacaktı. Düzenleme yapabilirmisiniz acaba

.resim {position: relative;width: 494px;height: 184px;}
.resim > span.altBilgi {position: absolute;width: 494px;height: 30px;left: 0;bottom: 0;background: rgba(0,0,0,.5);color: #fff;display: block;text-align: center;line-height: 30px;font-size: 20px;text-transform: uppercase;display: block;}
.resim:hover span.altBilgi {background:rgba(255,0,0,.5);color:#fff;}

Hocam arkandan 3 gülhu bi elham okuyorum, adamın hasısın

ALLAH kabul etsin dualarını hocam sağolasın R10+ Versen yeterliydi ama yinede sağolasın İşini gördüysek problem yok. Kolay Gelsin

+ ekledim hocam, tekrardan teşekkür ederim..