Website Overlay-Effect BEHIND Product Images

[Pushy123]

Hello guys,

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!

[Ruben_Dev]

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?

[Pushy123]

Additional Information:

I'm usinge the Ride-Theme

the code for the overlay i put in the theme.liquid is:

<style>
.grain {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
background: url(link);
opacity: .15;
z-index: 10;
display: block !important;
}
</style>

in combination with

<div id="FOREGROUND_DIV" class="grain"></div>

[Ruben_Dev]

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

[Pushy123]

I followed the instructions in this thread:

https://community.shopify.com/c/shopify-design/how-to-add-a-grain-effect-on-my-website-s-background/...

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.

[Ruben_Dev]

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 !

Friendly, Ruben