Dropshadow shows on top of image when viewing website on Macbook or iMac

Design help General
#1

Hello,

I bought this template, but I am having some trouble with the thumbnail shadows. So the thumbnail shadows show properly (beneath images) on my device which runs on Windows 10.
But the Thumbnail Shadows overlap the image when we run the website on Apple devices like Macbook and iMac.

13ebe025-7de4-4499-9882-47ffac720f99
13ebe025-7de4-4499-9882-47ffac720f991600×1000 125 KB

For reference please see the screenshot.

Template I bought link: LINK
Here is my site Read-Only: LINK
Here is my live website link: LINK

#2

Hi @OperiumMedia and welcome to the community.

Are you using Safari to preview your website ?
If yes, there’s a known issue with Z-index on this browser.

You can find a solution here :
https://stackoverflow.com/questions/40895387/z-index-not-working-on-safari-fine-on-firefox-and-chrome

You can also ask the author of the template.

#3

Hi Colibri,

Thanks for the guidance. It may be Safari indeed. I am new to webflow, I can’t seem to find a place to contact the template makers.

It seems like they say this is the solution:

    {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: absolute;
    z-index: 1000;
    ```

    }


However, I have no clue where to place this snippet of code. Should I just put it in the head section of the page settings?