Streaming live at 10am (PST)

Adding Overlay state to grid problem


Here is my portfolio, it is a simple square grid system,
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



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.


Hi Vincent, thanks for the quick replay :slight_smile:
I just tried it and it still won't work, check it out:


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.


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


Fixed It ... thanks man !!


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