Advanced css shadow filter - How to ?

Solved
Highlighted
Pathfinder
89 3 22

Hey,

 

Can anyone help please? 

 

I have this image block here - and would like to have the shadow png section to only become visible on the image area?

 

So you wouldn't see any shadow on the lower part of the sofa or the floor? The images aspect ratio will change from one product to the next - 

https://dea969dvjyp9yp35-21855633480.shopifypreview.com/collections/prints/products/quiraing-round-f...

and

https://dea969dvjyp9yp35-21855633480.shopifypreview.com/collections/prints/products/the-old-man-in-s...

 

this is the end desired result

Screenshot 2020-04-14 at 19.26.37.png

 

Notice there is no shadow on the floor.

 

Thank you in advance for any help / suggestions or advice!

Hope everyone is keeping well 

0 Likes
Highlighted
Shopify Partner
1777 211 370

This is an accepted solution.

Your best bet (considering picture aspect ratio can change) would be to anchor on the sofa and set the hight of the overlay to 75% such that the shadow will stop before the sofa's lower part starts, i.e.:

 

.hc-shadow-overlay {
    background-image: url(https://cdn.shopify.com/s/files/1/0218/5563/3480/files/shadow.png?v=1586880384);
    opacity: 0.15;
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 75%;
    z-index: 10;
    background-size: cover;
}

Screen Shot 2020-04-15 at 12.12.47.png

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Pathfinder
89 3 22

Than you Sergiu!

 

Much much appreciated,

 

All the best

0 Likes