Streaming live at 10am (PST)

Scaling div behind a div



I've been having some trouble with scaling a div that's behind a div.

So: I want to scale the blurred stripe on hover at section 2 + I want it to be a clickable link.
I know it won't be possible in the way i'm doing it right now but i have no idea how to do it else.

Also, what should be the best way to position the text in section 2 on the right and left?

Here is the project:

Thanks in advance,



Any idea on this?

@PixelGeek , @thesergie, @AlexN



Hello @DharmaNode, could you be more specific?

1) When you say you want "scale strip", you mean you want make strip bigger or background of strip bigger?
2) I am not sure if it is possible to make exactly strip shape clickable, because it is transparent part of div, actually created by 2 background images.
3) About text positioning: I do not say you doing wrong, just noticed, that I would use only 1 row instead of 2, columns with position relative and text blocks with position absolute.



I want to make the background of the strip bigger.


Well, lets think logically:
- that blurry picture is background image of the div, which is parent of div with strip,
- for make that image bigger on hover you will have to scale whole "parent div",
- if "parent div" will become bigger, then child element (div with strip) will become bigger too.

I would suggest add another, "background div", inside the parent, use that image and blurry effect on that "background div". Give it position absolute and z-index less than div with strip. With such structure you will be able to scale background without effecting div with strip.


Yeah as i said, it won't work out the way i'm doing it. :grinning:

But i don't quite understand what i need to do with the Z-Index if the new div.

I've tried using 2 divs within 1 div but the 3rd div would just be at the bottom of div 2 if you know what i mean.
Could you explain it a bit better? :grin:



I got some idea, here is workaround:


Learning more and more everyday!

Thanks so much. You're a lifesaver :wink:


:smiley: Nice to save life, btw instead of div "strip" you can use link-block and in this way it will be even clickable :wink:

closed #10

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