Blending modes on images bug - only on the homepage

Wiktor · June 21, 2022, 10:09am

Sup, I’ve done myself a website, but I’m not sure about something.
I have created a grid made of divs, which should function as a gallery - inside the divs, there are images, with blending mode lighten - effect does work on desktop and mobile at a different page (case studies), but for some reason, on the homepage which uses the same gallery blending modes doesn’t work on mobile.

Here is my site Read-Only: https://preview.webflow.com/preview/digitalcreator?utm_medium=preview_link&utm_source=designer&utm_content=digitalcreator&preview=60f64fca81b199bd077b6d0950583e8d&workflow=preview
normal link: https://www.digitalcreator.pl/

Daniel-Servica · June 21, 2022, 1:05pm

On your homepage you have set a a hover state on .purple-boxes-case-study on your case studies pages .cards-metavoice you haven’t.

so my point being, if the desired effect you want is a hovered state it will only apply to devices with a cursor.

Also, your current resting state for mix-bled-mode is normal.
Here is what it looks like with lighten applied.

mix-blend-mode: lighten;

With your current setup,I think what you’re looking for is mix-blend-mode: difference;