Why does opening a lightbox on click work in a specific location?

Question

css

Hello.
Lightbox Fresco has been added to the site, by clicking on the icon a gallery opens.
But you need to click in a certain place on this icon, I found out that this is the fault of the appearance of text and dimming when hovering over the icons, that is, if you remove the text by "poking" anywhere, everything will open.
It is impossible without text, there is some kind of solution.
Thank you all very much for any response.

Answer 1

You need to add a CSS property to the text wrapper that overlaps the icon - this rule is needed in situations where some element should be present on the page, but mouse events (hover, clicks) pass through it, to the layer below it. https://jsfiddle.net/yu5dat2L/1/ - in this case added pointer-events to the .thumbs:before (gradient black box) and .thumbs .caption (text over) selectors. pointer-events: none;

Answer 2

A quick example (if you click on the middle of the top it works) how to make a click on the whole picture work
https://jsfiddle.net/dxak1q27/