[Support request] How to get image to animate and move up and down slightly

[Jin]

Looking to get an image on my website to move up and down slightly. Please refer to links below.

[David]

Hi there,

try this:

1. Add this CSS to your site:

.has-floating-animation:hover .is-floating-animated {
    animation: float-up-down 2s ease-in-out infinite both;
}

@-webkit-keyframes float-up-down {
    0% {
        -webkit-transform:translateY(0)
    }

    50% {
        -webkit-transform: translateY(-10%);
        transform:translateY(-10%)
    }

    100% {
        -webkit-transform: translateY(0);
        transform:translateY(0)
    }
}

2. Select the Column Container that should be hovered over and in Advanced > Additional CSS Class(es) add: has-floating-animation

3. Select the Block you want to float up and down when the above container is hovered over and in Advanced > Additional CSS Class(es) add: is-floating-animated

[Author]

Posts