Adding Overlay state to grid problem

Design help General
1

Hi,
Here is my portfolio, it is a simple square grid system, http://eladadir.webflow.io/
I want to add each box an overlay with text and another div with opacity to cover the box but i can’t figure out how to do that …
Here is a preview link to my site
https://preview.webflow.com/preview/eladadir?preview=2d51de1051ef7be65413ec71b68b0ca1

Thanks

2

Hi Elad,

Some neat stuff on your folio :slight_smile: Also like the Monthypythonesque loading :slight_smile:

So. You need to first build the element as if it was hovered (the final state)

You have:

div Imagebox
– image

You need to make:

div imagebox
– image
– div overlay with opacity
– – the overlay text

Div imagebox need to be position:relative
– image needs to be position:absolute z-incex:10
– div overlay need to be position:absolute and width and height 100% z-index:20

Now you can add your text in the opacity div and you should have everthing piled up.

Now you can pass the overlay div opacity:0% and display:none

Now you add an interaction to the div imagebox, targetting the div overlay and limited to children (nested). The interaction will do onHover display:box then opactity 100%, and onHoverOut opactity zero then display:none

Should work.

3

Hi Vincent, thanks for the quick replay :slight_smile:
I just tried it and it still won’t work, check it out:
https://preview.webflow.com/preview/eladadir?preview=2d51de1051ef7be65413ec71b68b0ca1

4

the div imagebox needs to have a dimension, for everything under it to have a dimension. So give it width 20% or anything that gives it a width.

5

Ok its works now, but something get messed up now when i hover, it doesn’t effect the scaling.
and the other elements gets beneath this element

6

Fixed It … thanks man !!

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.