テキストcssを使用した画像上のホバー効果

Question

テキストが内部にある画像にオーバーレイ効果を使用する方法。 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> 

私はこれを使ってみましたが、それは私の必要性として、作品をdoesnot。 example

Answer 1

これを試してください。私はいくつかの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>