Axis Changing and Scale Effect on Hover

Publishing help General
1

Hello guys, just checking if there’s a simple way to reproduce some effect in my site: https://preview.webflow.com/preview/sqvare?preview=bc85e090cfdf96a207e79eb973a8223d

NEED
I’d love to recreate the effect used at the boxed section with VX, AI, ID and GO (The Desired Effect).
Not sure if it’s exactly a scale or an increase of Horizontal and Vertical dimensions. The cool stuff is that the effect do not interfers on the inside text. I’ve tried just scaling but my typography is growing too. There’s also an Axis Changing happening on HOVER because we can see shadows and images above other boxes. Any ideias how could I do this?

2

Hi Henri.

I have an idea, but have no time now to try it.
Instead of using picture as background on section that you want to increase, try to put image there and increase it size.

Good luck,
Anna.

3

Ok, I checked that site and now can tell you how exactly they did that:

1600×992 377 KB

Inside the div-block “title-content” they have 2 divs siblings:
1- “background-layer” (position: absolute) - background with color or picture, z-index = 10
2 - “title-relative” (position: relative) - information (header, icon, span, etc), z-index = 12

When you hover div-block transaction affect only background layer so it will not increase font

Good luck,
Anna

4

Thanks Sabanna, such a nice answer. As simples as it can be a great decision.
Thank you very much for your time to help me :smile:
You rock!

5

LOL You are welcome :slight_smile: I will keep this idea in my mind too, for future projects :wink: