Streaming live at 10am (PST)

Scaling div behind a div


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


#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.