Image Overlay - Hovering

Store Design
, , ,

Topic summary

A user working with Shopify’s Dawn theme encountered an issue with image overlay hover effects in a custom image boxes section.

Primary Issues:

  • The overlay only applied to text rather than the entire image
  • Attempting to apply the overlay directly to images caused them to disappear
  • Hover effects weren’t functioning to darken the overlay for visual feedback

Solution Provided:
A support team member requested store access and provided a CSS fix:

  • Navigate to Shopify admin → Online store → Customize → Theme settings → Custom CSS
  • Add the code: .image-overlay { display: block !important; }

Outcome:
The CSS solution successfully resolved the hover overlay issue. The discussion is now closed with the problem fixed.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Image 11-01-2025 at 13.11.jpeg
Image 11-01-2025 at 13.11.jpeg4112×2658 338 KB

Hi,

I am using the dawn theme, I have added a new section for image boxes, however, I want the overlay to be responsive when hovering over but it is not working.

Two questions:

  1. currently my overlay will only apply to the text, ideally I would like the overlay to apply to the image instead, and then when hovering, this to darken even more to easily identify which one you’re currently hovering over. When I have tried applying the overlay to the image, it just disappears completely, hence I put the overlay on the text instead.

  2. If applying the overlay to the image isn’t possible, how can I make the text overlay darken when hovering on the current image?

Thanks in advance.

Corey

2

Hi @ARTLOUNGE

Could you please share with us entry password so we can check it further?

DaisyVo_0-1736602446676.png
DaisyVo_0-1736602446676.png1559×819 141 KB

3

Hi, Password is teckea

4

any luck with this @DaisyVo

5

Hi @ARTLOUNGE

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.image-overlay {
    display: block !important;
}

image (3).png
image (3).png1366×819 117 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

6

Thanks that worked great