Image bigger than screen not showing properly on published site

Design help General
1

Hi everyone! I’m new to the forum, so I apologize upfront if I mess up with anything!

I’m trying to create a “fake” mask to follow my cursor so it appears to be revealing an image underneath its working in my live preview but when published is not showing properly, it appears to shrink the image and I’m not sure why!

PS. This is just a test to see if I can implement this on a real project, thats why the page doesn’t have any contento or properly named divs haha.

Any ideas?

Here is my site Read-Only: LINK
Here is my published site: LINK

2

Weird. Try setting the Mask Image width to 500VW (viewport width), also set the Div Block 2 Height to Auto.

I suspect the height of the parent Div is overriding the ratio of the Mask Div, making it’s maximum height 100% of the screen, and resizing the width accordingly.

In any case, I also suggest you take a look at this link Masking vs. Clipping: When to Use Each | CSS-Tricks - CSS-Tricks, maybe you can find a better way of doing this (your way works, but just in case it keeps having issues).

Hope it works out!