laravel css3とブートストラップを使用して画像をオーバーレイしようとしています

Question

これは私のlisting.blade.phpファイルです。一度に1つずつイメージをオーバーレイしたいが、イメージの近くにマウスポイントを置くと、すべてのイメージがオーバーレイされる。

<div class="row contain"> 
    @foreach($product as $data) 
     <div class="col-md-6 pad-space"> 
      <a href="#"> 
       <img src="{{ URL::to('/images/' .$data->image_1) }}" class="image" /> 
      </a> 
      <div class="overlay"> 
       <div class="text">{{$data->name}}</div> 
      </div> 
     </div> 
    @endforeach 
</div> 

これは私のcustom.cssファイルであり、bootstrap3も使用しています。私は、データベースから画像を取得するために@foreachを使用していた私の上記のリストファイルで

.selector{ 
    background-color:lightgrey; 
    padding-left:10%; 
    padding-right: 10%; 
} 

.pad-space{ 
    padding-top: 7%; 
} 

.contain { 
    width: 50%!important; 
} 

.image { 
    display: block; 
    width: 100%; 
    height: 50%; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
    transition: .5s ease; 
    background-color: #008CBA; 
} 

.contain:hover .overlay { 
    opacity: 0.5; 
} 

.text { 
    color: white; 
    font-size: 20px; 
    position: absolute; 
    transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

。 特定の画像にカーソルを合わせると、その画像にオーバーレイしてテキストを表示する必要があります。

Answer 1

あなたはオーバーレイがアンカー内にあるようにHTMLを変更する必要があります。

<div class="row contain"> 
    @foreach($product as $data) 
     <div class="col-md-6 pad-space"> 
      <a href="#"> 
       <img src="{{ URL::to('/images/' .$data->image_1) }}" class="image" /> 
       <div class="overlay"> 
        <div class="text">{{$data->name}}</div> 
       </div> 
      </a> 
     </div> 
    @endforeach 
</div> 

そしてアンカーが推移している時にオーバーレイを有効にするにはCSSを変更：

.contain a:hover .overlay { 
    opacity: 0.5; 
}