Blending Modes not affecting the images

[pratapburp (Pratap Bhagat)]

I’m working on a hero container for my brand website and using Webflow to implement the hero section interaction. I’ve been using blending modes on several elements to achieve a specific effect in Figma, but for some reason, I’m unable to replicate the same effect in Webflow. I’ve checked if the issue is with the images, but the blending modes are being applied correctly in Figma, just not in Webflow. I’m attaching the link and comparison images between Figma and Webflow. Please help a fellow designer out :) Thanks!
PS- I’m using the free version of Webflow.

---

Here is my site Read-Only: Webflow - Casestudy_Lamp-Animation

[mdelsing06 (Mike Delsing)]

Once I put the lamp-wrap items inside of the book wrap they seem to be working correctly… you need to adjust the z-index on them.

[pratapburp (Pratap Bhagat)]

Hey @mdelsing06 , Thank you for replying. Apologies for a late reply. I tried your solution, and it is working! But I’m not sure how you position the lamp elements. When I put the lamp-wrap items inside of the book wrap, the whole thing broke.

There’s also an interaction, not sure if it’ll work.