Images show up tiny unless HiDIP is selected in which case they show up pixelated

Hello everyone, I’m kind of stuck and could do with some help, please.

I’m very new to Webflow and have no training in website development.

I’m currently trying to build my photography website.

I want the following page to be my landing page, which in turn directs viewers to photo projects.

The issue I am getting is that it won’t reliably display the content as intended.

When in “design” mode everything appears as it should, however, when in preview, it bugs out and won’t display the photos as intended, I have no idea what I’m doing wrong.

I’ve tried selecting “HiDPI” which will “force” the images to display but then they are too pixelated for the intended use.

It’s important to me the text animates when I hover over any point of the image, I’ve tried 3 different ways and come across new problems every time I try.

I’ve been going round in circles for the last +4hours, I’m at a loss, please someone help me.

Thank you in advance.


Here is my site Read-Only: Webflow - caltristan