Streaming live at 10am (PST)

Adding Overlay state to grid problem


#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.