▼
Streaming live at 10am (PST)

Making a box layout with hover overlay

#1

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: https://preview.webflow.com/preview/patrik-interaction-design-portfolio?preview=91e5718db5d5a9ea4cd0186a0377e6c6

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?

Creating hover tabs with text over
#2

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.

#3

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?

#4

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.

#5

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!

#6

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.

#8

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

#9

Can anyone help me out with hover tabs?

Check the bottom of this page for the band members.

http://myrametal.webflow.com/band

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

#10

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 smile

#11