Grid scale interaction

[xoa]

Hello there,

a short question. I have a grid and added a scale of 1.025 to every cell on interaction. With this, the whole cell scales and is getting bigger by .025. But I’d like the cell to stay at the original size, and instead just scale (or zoom) the content of the cell, mainly the background image. Is this possible?

Thanks!

[ruenel]

Hello @xoa,

Thanks for posting in!

Yes, what you want is possible. You just need to insert the DIV element inside the cell which would contain the background image and then apply Effects on this element so that this will be the only element that will scale.

Hope this makes sense.

[xoa]

Thanks @ruenel

I tried this, but it will still scale as before. The whole cell scales, not just the image in the cell.

EDIT: Oh, I found that I have to set overflow to hidden for the cell.

EDIT 2: One more question. I have button with text (link) and now a div in the cell. To display the button, I have to make it as a child from the div, but then also the button scales.

If I put the button outside the div, I either only see the button or the div bg image. How to have the button on top of the div? Both are 100% width and height of the cell.

[marc_a]

Hi @xoa,

Would you mind sharing your credential so that we can check properly on your setup? To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password
• Page URL or Layout Builder name

You can find the Secure Note button at the bottom of your posts.

Thank you.

[xoa]

Hi there, ok, I‘ll provide you the login data.

The grid I‘m talking about is right on the Homepage, I tried with the cell „Wohnen“.

[tristup]

Hi @xoa,

I have checked your website but didn’t find the page where you are having this problem. Can you please share the exact Page URL for further investigation.

Thanks

[xoa]

Hi @tristup
it is the grid right there on the main page, this is the url: www.soelvahof.com

[ruenel]

Hello @xoa,

Thanks for updating in!

You need to put the Button element before the DIV element.

And then in your DIV element, you will have to position it as “Absolute”.

You may need to set a minimum height in your Button element settings to maintain a cell height.

Best Regards.

[xoa]

Hi @ruenel

Ok, I understand what you’re trying to achieve. I followed your steps. But there is still a problem. To make the div respond to the interaction, I have to “shrink” the button (link). I’ve set my button to auto both for width and height.

But then as a result of this, I can’t click anymore on the image (div) to follow the link, because I’ve made the button smaller to make the interaction work for the div.

So basically my div should also be a clickable link at the the same time.

[ruenel]

Hello @xoa,

Once the button is set to have 100% width and height, you can no longer hover over the image since the button is on top of the DIV. To get around this, you can enable the “Link Child Interactions” in your Cell element Effects.

Please check out my example in the first cell.

Hope this makes sense.

[xoa]

It works, thanks a lot @ruenel

[ruenel]

You are most welcome, @xoa!