Image click effect as button

I’m trying to implement really simple and common case:
A list of products with image and title below for each. Default behavior for <a class="item" when clicking on it is a gray backdrop (overlay, mask, don’t know how to properly call it). But when there is a image inside the < a > tag, gray mask is not fully covers the div. More precisely, the image covers a part of it. I want to make the whole block gray including image (gray mask above everything else) but with no luck. Take a look on the image:

Here is what I want to achieve:
My code:

 <div class="list">
        <div class="row" style="flex-wrap: wrap;">
            <div class="col col-50" ng-repeat="product in products track by $index">
                <a class="item">
                    <img class="product-image" ng-src="{{product.image.url}}"/>

…and sorry for my french. Any ideas?

1 Like

It seems that I’m asking something confusing, maybe I should look at it from other angle. I just want to make the gray overlay when clicking on item above the image, so the image will be painted too…

What you want can be achieved with plain css - I just did a web search on the following phrase: ‘overlay backdrop image css’ and many of the results seem relevant to you.