Scaling div behind a div

Design help General
1

Hello,

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:
https://preview.webflow.com/preview/bemeapp?preview=e6242975ac343f53e0b2ba1f61bee20c

Thanks in advance,

Michael

2

Any idea on this?

@PixelGeek , @thesergie, @AlexN

Thanks!

3

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.

Regards,
Anna

4

I want to make the background of the strip bigger.

5

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.

6

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:

Thanks!

7

I got some idea, here is workaround: https://drive.google.com/file/d/0B-7cg8BSq1Z_RDdhWE5GTVplbTQ/view?usp=drivesdk

8

Learning more and more everyday!

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

1 Like
9

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

10

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