How can I adjust the dimness of my debut hero image using CSS?

Store Design

Topic summary

Main issue: The theme’s hero image (with text overlay) appears too dark; the requester wants to remove or adjust the dimming. Two images were provided (original vs. on-site) to illustrate the overlay effect.

Proposed solution: Add a CSS rule at the end of the stylesheet to target the hero overlay’s pseudo-element and set its opacity to 0 using !important. This overrides the theme’s darkening effect and restores the image’s original brightness. (A code snippet was provided and is central to the fix.)

Technical notes: The solution relies on CSS opacity and the ::before pseudo-element applied to the hero overlay. Placing the rule at the bottom ensures it takes precedence over existing theme styles.

Outcome: The requester confirmed the fix worked. No alternative approaches or disagreements were discussed.

Status: Resolved; no further action items or open questions.

Summarized with AI on March 4. AI used: gpt-5.
1

The hero image (image with text overlay) I have on my site is darkened by the theme. Any css I could add to remove (or alter) this effect?

Included: the original image, and the image as seen on the site.

Site address: www.evaporust.co.il

Thanks

Original
Original4267×2845 2.84 MB

As seen on the site
As seen on the site996×594 736 KB

2

Good Afternoon,

Add this CSS to the bottom of your stylesheet:

.hero__overlay::before {
    opacity:0 !important;
}

Hope this helps!

-Justin

1 Like
3

Thanks so much!

1 Like