How To Add a Vertical Hover Animation in CSS

How To Add a Vertical Hover Animation in CSS

Sometimes it’s useful to redirect a Contact Form 7 submission to a Thank You page. Let’s be honest…nothing can provide you with the level of accuracy in tracking as a visited Thank You page as far as Google Analytics and Google Tag Manager is concerned.

Make an Image or Div bounce

Add the HTML:

<img src="https://placekitten.com/30/30" class="vert-move" />

Add the CSS:

img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

If you applied the CSS class on a Div, you need to change img.vert-move to div.vert-move

Leave a Comment