尝试使用laravel css3和bootstrap叠加图像

Question

This is my listing.blade.php file. I want to overlay image one at a time but all my images are getting overlayed as I hover the mouse point near the image.

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

This is my custom.css file and am also using 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%);
}

In my above listing file I have used @foreach to fetch the image from database. So if I hover on a specific image then it should overlay and provide a text on it.

Answer 1

You should change the HTML so that the overlay is within the 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>

And change the CSS to activate the overlay when the anchor is hovered:

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