Question

我的页面上有一个用作链接的图像。我试图获得一个效果，当悬停在图像上时它将变得有点暗（透明的黑暗），并在图像上方将出现文字说“查看”。我正在使用Bootstrap，所以它需要响应。

我尝试在CSS中执行categorieimg:a hover但似乎没有响应。如果可以使用jQuery完成，欢迎所有建议。

我的HTML：

@extends ('master') 

@section('content') 
<div class="row"> 
    <div class="col-md-12">
        <h1 class="text-center">Myhero Shop</h1> <br><br>
    </div> 
</div>  
<div class="row"> 

    @if ($categories)
    @foreach($categories as $category) 
    <div class="col-md-4 col-sm-6 text-center"> 
        <h3 >{{ $category['title'] }} </h3>   
        <p class><a href="{{ url('shop/'. $category['url']) }}" class="categorieimg"><img width="250" src="{{ asset('images/' . $category['image']) }}"></a></p>  
        <p>{!! $category['article']!!}</p>  

    </div> 
    @endforeach 
    @else 
    <div class="col-md-12"> <br><br>
        <p class="text-center" style="font-size: 18px"><b>No categories found...</b></p>
        <div 
            @endif
    </div>
    @endsection

Answer 1

为了能够达到你想要的效果，你应该使用PNG图像而不是JPEF。因为JPEG图像将占据元素的整个空间，并且您无法在任何地方显示背景颜色。

查看此工作演示。

img {
  width: 200px;
  height: 200px;
  background-color: red;
}

img:hover {
  background-color: gray;
}

<img src="https://cdn4.iconfinder.com/data/icons/commerce-5/100/.svg-6-128.png" alt="">

悬停效果超过图像作为链接的想法

1 个答案: