Layering for effects


I am a current design student, trying to make a portfolio website here in Webflow.
I am very,I meant VERY. new to webflow and website building in general so I have lot to troubleshoot.

For now, i am mainly having an issue with layering with effects.

This is my website, and when you hover on image.

I want it to act like this:
Screenshot 2023-03-07 at 12.21.52 PM

Main text should show up. Blur and grayscale the back of it.

Current layering:
Screenshot 2023-03-05 at 10.59.46 PM

There is a DIV block, holding two text boxes. and this DIV block got a background filter effect on(blur,grayscale)

But because this DIV block is scaled to two text block sizes, I had to menually give the padding so it covers the all the image on the back.

And this paddings are not the best, I cannot get to the exact size. and its not very responsive when I resize the website.

Please let me know how to do layering better in this situation!
Thank you.

Howdy @Villaindaze and welcome to the community :wave:

Kudos to you learning Webflow as a design student! It’s definitely got a bit of a learning curve but not only is there a lot of great threads here in the forum, but there are tons of free lessons available in the University.

In terms of your question, it’s going to be a lot easier to answer your question if we can take a peek at your setup in the Designer. If you can reply with a read-only link, I (or someone else) would be more than happy to take a closer look and answer your question :+1:


I would love to makes some break through here.
Here is my read only link!

Thank you so much!