Image Overlay Caption

by benroe

HTML

<div class="wrapper">
<img src="http://dribbble.s3.amazonaws.com/users/12204/screenshots/407441/wunderkitupgrade.jpg"/>
<a class="imgHover" href="#">Caption</a>
    </div>

CSS

.wrapper {
    widht:320px;
    overlay:hidden;
}

.imgHover{
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    padding: 15px;
    background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */
    background: rgba(0, 0, 0, .5);
    opacity:0; /* transparency */
    filter:alpha(opacity=00); /* IE transparency */
}

a.imgHover:hover{
    opacity: 1;
    filter:alpha(opacity=100);
}