將鼠標懸停在圖片上作爲鏈接問題

Question

我試圖達到這種效果，一旦你將鼠標懸停在圖片上，它會改變顏色，一旦你點擊它，它會將你重定向到請求的頁面，所以我用它作爲一個href 。我試圖做的CSS im：懸停，但它沒有奏效。我的圖片是PNG。我正在使用Bootstrap來響應網站。

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

My css: 

.categorieimg:hover{ 
    background-color: #080808; 
} 

Answer 1

img { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
} 
 

 
img:hover { 
 
    -webkit-filter: none; 
 
    filter: none; 
 
}

<a href="https://www.w3schools.com/cssref/css3_pr_filter.asp"> 
 
    <img src="https://www.w3schools.com/cssref/pineapple.jpg" /> 
 
</a>