Edit in JSFiddle

<div class="hover-image">
    <img src="http://placehold.it/400x300" alt="Alternative text"/>
    <div class="hover-text">dfjglskdj fgkljsdflgkj sd</div>
</div>

.hover-image {position:relative;width:400px;}
.hover-image img {display:block;}
.hover-image .hover-text {
    position:absolute;
    bottom:0px;left:0px;right:0px;
    background-color:rgba(100,100,100,0.5); 
    padding:20px;
    margin:0px;
    opacity: 0;
}

.hover-image:hover .hover-text {
    opacity: 1;
    transition: opacity 200ms;
    /* Safari */
    -webkit-transition: opacity 200ms;
}