[Support request] Zoom in or zoom out of the background

[Rafał]

Do you have any idea how to create zoom in or zoom out efect only on background image like on this vid

Duration time: 7:18 – 7:26

Thank you

[Elvin]

Hi,

Can you link us to the site you’re trying to apply this on? So we could inspect and give you the most appropriate way to achieve this.

You can provide the site details on the Private Information textarea. Thank you.

[Rafał]

ok

[Elvin]

Thank you.

Any particular event trigger for this? (example: zoom on hover?)

Or perhaps you want this to zoom onload?

[Rafał]

Probably onload. I just want to create a simple zoom in or out when someone enters the website without replays.

Hover case it’s solved on this forum.

[Elvin]

This is pretty tricky to do. Bare with me.

First, we must alter your GenerateBlocks structure.

See this image for structure reference:
https://share.getcloudapp.com/WnuryEA1

It’s basically, 1 “Wrapper Container” with 2 more containers inside it.

For the 1 “Wrapper Container” added with the CSS Class relative-wrapper.

You then place the background-image on the 1st container and add CSS class zooming-bg on it.

The 2nd container’s purpose is for your section content, place your contents there and add CSS class zooming-bg-content.

You can add the CSS class on Container Block’s Settings > Advanced. There should be a “CSS Classes” text field there.

Once everything is placed. You can add this CSS code:

.relative-wrapper{
position:relative;
overflow:hidden;
}

.zooming-bg{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
animation: zoomBG ease-in-out 8s 1;

}

.zooming-bg-content{
position:relative;
}

@keyframes zoomBG {
  from {transform: scale(1);}
  to {transform: scale(1.5);}
}

[Rafał]

How do you create this structure? I have totally no idea how to expand the structure to “tree view”.

Should I follow this docs https://docs.generatepress.com/article/adding-a-container-wrapper/ ?

[Elvin]

Here’s a demo video on how to create this kind of layout.
https://share.getcloudapp.com/4guJK15p

To put it simply, we’re basically placing 2 containers inside a container.

[Rafał]

Almost fine – it’s come back to the start position after zoom. You can check it live now.

[Elvin]

Let’s try replacing the animation CSS.

Replace the previous animation: property to this:

.zooming-bg{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
animation: zoomBG 8s normal forwards ease-in-out;
}

[Rafał]

you are awesome 🙂

[Elvin]

No problem. 🙂

[Author]

Posts