Archived topic
How to get image to animate and move up and down slightly
1 reply · Started by Jin on April 4, 2022
Viewing posts 1–2 of 2
Looking to get an image on my website to move up and down slightly. Please refer to links below.
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
This archived topic is closed to new replies.