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.

A wise man once said:
"Have you cleared your cache?"

[Rafał]

ok

[Elvin]

Thank you.

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

Or perhaps you want this to zoom onload?

A wise man once said:
"Have you cleared your cache?"

[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);}
}

A wise man once said:
"Have you cleared your cache?"

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

A wise man once said:
"Have you cleared your cache?"

[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;
}

A wise man once said:
"Have you cleared your cache?"

[Rafał]

you are awesome 🙂

[Elvin]

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts