Making a box layout with hover overlay

I want a box layout with:

  1. 2 boxes next to each other in desktop and tablet, convert to 1 box per row at phone.
  2. Each box is clickable/touchable and navigates to a other page
  3. Each box is covered by an image
    In this case the source image is 450px, but any size works as long as I can have 2 boxes on one row and a responsive layout
  4. When mouse enabled, hovering over the box causes a subtle size animation and an overlay div with text “Open?” and a yes and no button is shown, still whole box area should still be clickable.

Here is a preview. In the webflow editor (for me atleast) it works the way I want.
Check it out in webflow: Webflow - Patrik Strandell - Interaction Design Portfolio

After a publish the boxes spread out vertically and the hover effect does not work, and they are not clickable.
Published (not working): http://patrik-interaction-design-portfolio.webflow.com/

Any ideas?

Container is maximum 940px, your two blacks are 450 + 2 x 10 so the total is 940… maybe there’s something generating extra space. So instead of 450px give them width:46px or 47px… should stack up nicely.

1 Like

Surprisingly 446px in width gives the same result

Also it works in webflow preview mode, but not in publish - so I’m assuming something is different from these modes? But in this case I think I’m missing what that could be?

It happened to me, only with the row widget. I tend to hack-fix it by lowering the values. For that kind of layout I don’t use rows anymore, but divs with display:inline-box.

the way dimensions of html elements are calculated by browsers has been a huge source of errors in the past. Still happen sometimes but it’s way better now.

1 Like

I still suspect a webflow bug in here, since in the published code I had double-divs with my class names.

Anyhow I just remade it from scratch, used overflow hidden, used 45% for width and 2% for each margin, and put it in a container which had text align: centered.

Right now it seems to be working.

Still interested in knowing more what could have caused this to begin with, just for continued learning.

And thanks for the help!

This is a good practice with Webflow when something doesn’t work with no rational explanation. I will check the double divs when I encounter that again.

Hi @Tibit, I took a peek at your site.

This demo might help you with the overlay effect:
Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Fade Overlay on Hover

Also, to help with the responsive issues, try using percentage widths and images (instead of background images). This helps me a lot. Take a peek here:
Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Responsive Grid Layout

1 Like

Can anyone help me out with hover tabs?

Check the bottom of this page for the band members.

I want similar 4 tabs full width across and when I hover over it is 60% black opacity with text in white.

Not sure where to start on this.

Many thanks

Hi @johndvv, Great question! this demo may be helpful:

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Fade Overlay on Hover

Hope this helps :slight_smile: