php - 尝试使用 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，以便叠加层位于 anchor 内:

<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 以在悬停 anchor 时激活叠加层:

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