I added a slightly transparent overlay to my website. The overlay is almost perfect, except that the product images are also affected by it.
Is there a way to always have the product images displayed in the foreground, i.e. above the overlay?
Thank you for your help!
How did you add your overlay?
If you wrote the CSS yourself, you might have to specify your classes more accurately
Does it help you?
Did you make it another way?
I'm usinge the Ride-Theme
the code for the overlay i put in the theme.liquid is:
display: block !important;
in combination with
<div id="FOREGROUND_DIV" class="grain"></div>
Can you send me an url of your current page?
I have to see your html structure and where exactly you're applying the overlay
I followed the instructions in this thread:
But that code just adds an overlay which is in front of everything on the website.
I am searching for the same effect but with product images being in the front.
Right here, you're probably wanting to retrieve the image of the product and overlay it when user performs an action right?
This really needs more than css. I would need to see your store and know how you're going to :
-trigger the overlay and remove it (a hit on a button or when the user comes to the page by example) ;
-if a there is a text with the image ;
-if the overlay is displayed for all products or for only specific ones and more customizations you could make...
I propose you to ask for a developer service to ensure quality, and I'm all yours !
Make the shift from discounts to donations, and witness your business not only thrive fina...By Holly Dec 4, 2023
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...By Arno Nov 27, 2023
You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...By Skye Nov 8, 2023