将悬停效果悬停在图像上作为链接创意

Question

我的页面上有一张图片，我将其用作链接。我正在尝试获得一种效果，当悬停在图像上时，它会变得更暗(透明黑暗(，并且在图像上方会出现"视图"的文字。我正在使用引导程序，所以它需要响应。

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

我的网页：

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