Make an Image Hover with JavaScript, HTML, and CSS

A quick way to add style to your web design.

All we’re going to do is bounce our image back-and-forth, left and right, up and down to create this effect.

We’ll start by capturing the image through the DOM and finding its center.

Next we’ll create a simple animation loop…

Now all we have to do is bounce our image back-and-forth on the x and y axis
we’ll use a sine curve to get this behavior…

…and of course we’ll have to modify that sine curve to make our animation attractive:
for the x-axis, increase the amplitude by 5 and decrease the period by 6%
for the y-axis, increase the amplitude by 10 and decrease the period by 0.6%

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.