Layering for effects

Hello,

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:

Hi!

I would love to makes some break through here.
Here is my read only link!
https://preview.webflow.com/preview/portfolio-32c8f1?utm_medium=preview_link&utm_source=dashboard&utm_content=portfolio-32c8f1&preview=cff83a205adc972e70523f41cc1f8eb3&workflow=preview

Thank you so much!