Hover effect over image with text css - html

Question

How to use an overlay effect over an image with text inside.
Fiddle
<div class="ft-item">
<span class="ft-image">
<img src="https://image.ibb.co/irjHmR/backwater.jpg" alt="featured Scroller" draggable="false">
</span>
<div class="ft-data">
<a class="text-upper" href="#">
<h5 class="itemh5">Test Content</h5>
</a>
</div>
</div>
I tried by using this but it doesnot works as my need. example

Answer 1

Try this. I have changed some css.
.ft-item {
float: left;
margin-bottom: 0px;
position: relative;
}
.itemh5 {
color: #fff;
font-size: 15px;
font-weight: 300;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 0px;
font-family: 'Roboto Slab', serif;
font-weight: 500;
}
.ft-image {
float: left;
width: 100%;
display: block;
}
.ft-image img {
width: 100%;
height: auto;
}
.ft-data {
background: rgba(30, 110, 30, 0.68);
content: "";
height: 0;
left: 0;
position: absolute;
right: 0;
width: 100%;
-webkit-transition: .5s ease;
transition: .5s ease;
opacity: 0;
}
.ft-item:hover .ft-data {
height: 100%;
opacity: 1;
}
.ft-data .text-upper {
display: block;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.ft-foot {
float: left;
width: 100%;
padding: 3px 10px;
background: #000;
}
.ft-hotel,
.ft-plane,
.ft-tea,
.ft-boat,
.ft-car {
float: left;
height: 16px;
margin: 0 5px;
color: #292c2f;
padding-left: 20px;
font-size: 12px;
line-height: 20px;
}
.text-upper {
text-transform: uppercase;
}
.ft-title {
float: left;
font-size: 14px;
}
.ft-offer {
float: right;
color: #fff;
font-size: 11px;
font-weight: 700;
margin-top: 10px;
}
.panpad {
padding: 0px;
}
.ft-foot {
float: left;
width: 100%;
padding: 3px 10px;
background: #484848;
}
.ft-foot ul {
padding: 0;
margin: 0;
text-align: center;
}
.ft-foot li {
display: inline-block;
margin: 0 2px;
}
.inclusion {
color: white;
padding: 5px 0 10px 0;
display: block;
letter-spacing: 1px;
text-align: center;
}
.inclusion span {
display: block;
font-size: 8px;
text-transform: uppercase;
}
.inclusion i {
font-size: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-6 col-sm-6">
<div class="panel panel-default">
<div class="panel-body panpad">
<div class="ft-item">
<span class="ft-image">
<img src="https://image.ibb.co/irjHmR/backwater.jpg" alt="featured Scroller" draggable="false">
</span>
<div class="ft-data">
<a class="text-upper" href="#"><h5 class="itemh5">Test Content</h5></a>
</div>
<div class="ft-foot">
<ul>
<li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a></li>
<li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a></li>
<li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a></li>
<li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a></li>
<li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a></li>
</ul>
</div>
<div class="ft-foot-ex">
</div>
</div>
</div>
</div>
</div>