question/feature_request(interface): images overlaps close button

[Kristinita]

1. Summary

Currently, images may overlap the close button element. I couldn’t find how I can fix it.

2. Argumentation

For mobile devices users current behavior may be not best.

1. Design — I’m not sure if seeing the close button solely partially is the best web-design solution.
2. Accessibility — when the button isn’t visible, it may not be intuitive for users to understand how to exit the hes-gallery.

3. MCVE

I opened hes-gallery demo page in Firefox → I ran Responsive Design Mode → I made the screen small:

The dog image partially overlaps the close button.

I made the screen even less:

The close button aren’t visible.

4. Not helped

4.1. z-index

We can prioritize left and right arrows rather than images:

#hgallery button
    z-index inherit

Example result:

But I couldn’t find, how I can get the similar behavior for close button. It realized as pseudo-element #hg-bg::after (and possibly is not the best idea). I read about z-index for pseudo-elements on the Stack Overflow, but I couldn’t find, how I can solve the problem from this issue.

Thanks.

[demtario]

Hi, to fix this, I think we need to rework this close button to be own element in the DOM structure.

Now it is just a pseudo-element on the background, and that probably complicates the whole problem