New Shopify Certification now available: Liquid Storefronts for Theme Developers

Website Overlay-Effect BEHIND Product Images

Pushy123
New Member
4 0 0

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!

Replies 5 (5)
Ruben_Dev
Shopify Partner
11 1 1

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?

 


-Need a assistance on your store? Chat on WhatsApp or email : albanhonfovou@proton.me
-Front-end Web Developer | Shopify Expert

The Freelance to power your Design and Performances
Pushy123
New Member
4 0 0

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
Shopify Partner
11 1 1

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


-Need a assistance on your store? Chat on WhatsApp or email : albanhonfovou@proton.me
-Front-end Web Developer | Shopify Expert

The Freelance to power your Design and Performances
Pushy123
New Member
4 0 0

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
Shopify Partner
11 1 1

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



-Need a assistance on your store? Chat on WhatsApp or email : albanhonfovou@proton.me
-Front-end Web Developer | Shopify Expert

The Freelance to power your Design and Performances