I am new to webflow and its awesome. This is my first project for a client and i am having some issues that i hope you can help me with.
I am trying to achieve the following effect. link: https://webflow.com/discover/popular?page=2#recent
The effect when you hover on the thumbnail it has a black oppacity and the text on top.
As you can see in my project i cannot seem to align the black box exactly on top of the thumbnails behind.
The thumbnails behind though i want to center them in a container 1200px wide, so when on a larger screen they stay in the middle of the screen (i think i did this correct). I think i arranged them to have 3 in larger and laptop screens, 2 on tablet mode, 1 on mobile phones.
My problems are: -The hover effect, - The size and position of the thumbnails and boxes, -Text to stay responsive.
I hope this are all clear. I know that my classes and everything are a mess and i am a little bit stressed if all this will affect the working order of the website. Any recomendations are very very welcome.
Thanks in advance
Here is my site Read-Only: [https://preview.webflow.com/preview/human-brands?utm_medium=preview_link&utm_source=dashboard&utm_content=human-brands&preview=abc00f9b446fa56198533b7e03cb3da2&mode=preview]
(how to share your site Read-Only link)