Sizing, Hover issues

Design help General
1

Hi all.
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
Constantinos

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)

2

Looks like you went the hardest way to achieve this effect :smiley: All you need to do is put an absolutely positioned div with your black box and text inside it into your item that you want it to be on top of on hover. Give it higher z-index so that it is above the actual content and then create hover interaction that would reveal this black box.

3

@dram Thanks for the reply.
I added a div block absolute full width with high z index but as you can see in the screen shot its all over the width of the collection. I added padding to the thumbnails to create the gap between them. I tried adding padding to the black div but when tried it on different screens the black div shifts rigth and left.

Screenshot 2020-03-15 at 01.40.15
Screenshot 2020-03-15 at 01.40.15498×1448 45.3 KB

This is the newest link. https://preview.webflow.com/preview/human-brands?utm_medium=preview_link&utm_source=dashboard&utm_content=human-brands&preview=47ecb3c3e6648c6d977e36f5157b957f&mode=preview

Should i try to recreate the collection list again?

4

Put your Div Block 37 inside your Product Wrapper and set your Product Wrapper to have position: relative

1 Like
5

@dram
Everything looks fine set. The only issue that remained is the mobile on landscape. The black div stretches left and right. What is causing this while the rest are ok.
Thanks a million dram

6

i think i fixed it. i just refreshed the page. I made the Product item as a a flexbox vertical center and center and it fixed it.

1 Like