[Resolved] How to animate background images

[Ben]

Hey guys,

I’m using generate blocks to build my page.

But how would I animate the background image when hovered over like in this video:

https://www.screencast.com/t/QGpOtE61qjBe

Is it possible?

Thanks

[David]

Hi there,

this will be a feature if GenerateBlocks Pro – and it will do so much more 🙂
In the meantime you can use this CSS that will scale on hover any Background images that are set as Pseudo Element:

.gb-container {
    transition: all 0.2s ease-in-out;
}
.gb-container:hover:before {
    transform: scale(1.1);
}

If you wanted to make it apply only to select container backgrounds, then give each Container an Advance > Additional CSS Class(es) of: zoom-background

Then use this CSS instead:

.gb-container.zoom-background {
    transition: all 0.2s ease-in-out;
}
.gb-container.zoom-background:hover:before {
    transform: scale(1.1);
}

[Ben]

That’s perfect, thanks David!

[David]

You’re welcome

[Author]

Posts