リンク上のイメージとしてのホバー効果

Question

リンクとして使用しているページに画像があります。私は、ホバリングがイメージ上にあるとき、それは少し暗くなり（透明な暗い）、イメージの上に "View"というテキストが表示されるような効果を得ようとしています。私はブートストラップを使用しているので、応答性が必要です。

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