將效果懸停在圖片上作為鏈接提示

Question

我的頁面上有一張圖片，用作鏈接。 我試圖獲得一種效果，當懸停在圖像上時，它會變得更暗（透明暗），並且在圖像上方會出現文字“ View”。 我正在使用Bootstrap，因此需要響應。

我試圖做categorieimg:a hover在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="">