[Resolved] How to animate background images

Home Forums Support [Resolved] How to animate background images

Home Forums Support How to animate background images

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1587769
    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

    #1587958
    David
    Staff
    Customer Support

    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);
    }
    #1587982
    Ben

    That’s perfect, thanks David!

    #1588010
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.