Hi all does anyone know a way to get this layered look with colour below and a light grey filter over the top? thanks
Topic summary
A user seeks help achieving a layered visual effect with a colored background overlaid by a light grey filter, sharing a reference image.
Community Response:
- Multiple developers request the store URL and password to provide specific solutions
- User shares store URL: Proerex.co.nz
Proposed Solution:
One responder provides CSS code to create the grey overlay effect by adjusting image opacity:
- Add code to
base.cssortheme.cssvia Online store > Themes > Edit code - Alternative: Use Customize > Settings > Custom CSS tab
- The CSS targets
.banner__mediaclass and setsopacity: 0.3to create the grey layer effect - Includes a screenshot showing the expected result
Status: Solution provided but not yet confirmed as implemented or successful by the original poster.
2 Likes
1 Like
Hello @Temp265 ,
I hope you are doing well!
Can you please provide the store URL so that I can fix this for you? Also, I want to inform you that this can be done by adding opacity to the background image.
1 Like
Hi @Temp265
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
1 Like
The URL is Proerex.co.nz thanks.
Please copy and paste the below CSS to base.css or theme.css. To find base.css or theme.css go to Online store >> Themes >> Edit code, search for base.css or theme.css and add the code to the top of the file.
Alternatively, if the code didn’t work, go to Online store >> Themes >> Customize >> Click on Settings icon to the left >> Search for Custom CSS tab at the bottom and paste the code.
.banner__media.media.scroll-trigger.animate–fade-in {
opacity: 0.3;
}
The layer will be slightly grey
1 Like