How can I add a text and overlay fade to my block header?

Store Design

Topic summary

Goal: add text with an overlay fade on images in the unero-banner-grid-section, matching a W3Schools CSS image overlay fade example.

Context: links provided to the live site and a screenshot of the current section. The desired interaction is text appearing with a fade overlay on hover.

Proposed approach: a CSS suggestion that hides the heading (h2) inside the banner item by default and shows it on hover. This addresses hover-based text reveal but does not specify the overlay element, opacity, or transition timing needed for a fade effect.

Key details:

  • Uses CSS visibility to toggle h2 inside the banner item on hover.
  • Further customization is suggested to meet the exact overlay fade behavior.

Outstanding items:

  • Implement an actual overlay layer (e.g., a positioned element) and add opacity/transition for the fade effect.
  • Confirm correct selector targeting for the theme’s HTML structure.

Status: no confirmation of implementation; solution appears partial and the discussion remains open.

Summarized with AI on February 7. AI used: gpt-5.
1

I’m looking to add a text and overlay fade for the block (unero-banner-grid-section) (see the example in the link below of what I’m looking for).

link to my website : stockunion.co.uk

this section https://imgur.com/a/F4IjoJQ

what i need https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

2

Hi there,

One solution can be the below CSS:

.banner-item-content h2 {
visibility: hidden;
}

.banner-item-content:hover h2 {
visibility: visible;
}

Of course, it can be further customized based on your needs.