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:

1 Like

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

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