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.

Image for post
Image for post

Next we’ll create a simple animation loop…

Image for post
Image for post

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…

Image for post
Image for post

…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%

Image for post
Image for post

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

Written by

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store