How can a dark overlay be displayed when I hover over the section image banner on the TOP page?

Store Design
, ,

Topic summary

Goal: Add a dark (gray) hover overlay to image link banners to improve link visibility on a Shopify store.

What was done:

  • For the top-page slideshow banner, helpers shared CSS using :before/:after pseudo-elements to create a semi-transparent black overlay on hover (selectors like .slideshow__slide > a and .image__hero__scale picture). Code was added either to theme.css or Theme settings > Custom CSS.
  • For the grid images below the slideshow, additional CSS was provided (e.g., targeting .column__inner figure and .column__image > a) to apply the same hover overlay.

Outcomes:

  • The original issue (slideshow banner) is solved.
  • The extension to the grid images under the slideshow is also solved. The requester confirmed both fixes worked.

Latest request (open):

Notes:

  • Solutions rely on CSS hover states and pseudo-elements (::before/::after) with a semi‑transparent background (rgba/hex with alpha). Code snippets are central to the thread.
  • Status: Ongoing; awaiting a generalized, site‑wide CSS selector approach.
Summarized with AI on December 14. AI used: gpt-5.
4

Please add this code to Online Store > Themes > Customize > Theme settings > Custom CSS

.image__hero__scale:hover picture:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000087;
    display: block;
    width: 100%;
    position: absolute;
}