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 !!

closed #7

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