Hover effect over image with text css

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>