Image click effect as button

ionic-v1
1

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:

image
ui.jpg351×597 62.8 KB

Here is what I want to achieve:
image
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}}"/>
                    <BR/>{{product.name}}
                </a>
            </div>
        </div>
        </div>

…and sorry for my french. Any ideas?

1 Like
2

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…

3

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.