You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
UPD: Here is one nice final demo with some extra stylings.
.image-container {_x000D_
position: relative;_x000D_
display: inline-block;_x000D_
}_x000D_
.image-container img {display: block;}_x000D_
.image-container .after {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
display: none;_x000D_
color: #FFF;_x000D_
}_x000D_
.image-container:hover .after {_x000D_
display: block;_x000D_
background: rgba(0, 0, 0, .6);_x000D_
}_x000D_
.image-container .after .content {_x000D_
position: absolute;_x000D_
bottom: 0;_x000D_
font-family: Arial;_x000D_
text-align: center;_x000D_
width: 100%;_x000D_
box-sizing: border-box;_x000D_
padding: 5px;_x000D_
}_x000D_
.image-container .after .zoom {_x000D_
color: #DDD;_x000D_
font-size: 48px;_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
margin: -30px 0 0 -19px;_x000D_
height: 50px;_x000D_
width: 45px;_x000D_
cursor: pointer;_x000D_
}_x000D_
.image-container .after .zoom:hover {_x000D_
color: #FFF;_x000D_
}<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="image-container">_x000D_
<img src="http://lorempixel.com/300/180" />_x000D_
<div class="after">_x000D_
<span class="content">This is some content. It can be long and span several lines.</span>_x000D_
<span class="zoom">_x000D_
<i class="fa fa-search"></i>_x000D_
</span>_x000D_
</div>_x000D_
</div>