尝试使用laravel css3和bootstrap覆盖图像

Question

这是我的listing.blade.php文件。我想一次覆盖一个图像，但是当我将鼠标点悬停在图像附近时，所有图像都会覆盖。

<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。

.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%); 
} 

在我上面的列表文件中，我用@foreach从数据库中获取图像。 因此，如果我将鼠标悬停在特定图像上，则应该重叠并在其上提供文本。

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; 
}