Shake an image on hover using CSS

Hey Folks,
I am up with another interesting tutorial of CSS. In this tutorial, we will learn how to shake an image using CSS when hover on the image. So you must have seen ads on many websites. As soon as you take your pointer to the ad, it starts shaking.

And sometimes when you place your pointer on submit button it starts to shake. These ads are basically made to gather your attention towards them. We will learn how to make ads interesting by applying the shaking effect on them.

Code to shake an image on hover using CSS

We will understand the code snippet line by line. We have used inline styling in the above code. Inline styling is implementing CSS and HTML in the same file. We can also create separate files one a CSS file and then link it with the HTML file.

<html>

<head>
    <style>
        img:hover {
            animation: shake 0.5s infinite;
        }
        
        @keyframes shake {
            0% {
                transform: translate(1px, 1px) rotate(0deg);
            }
            10% {
                transform: translate(-1px, -2px) rotate(-1deg);
            }
            20% {
                transform: translate(-3px, 0px) rotate(1deg);
            }
            30% {
                transform: translate(3px, 2px) rotate(0deg);
            }
            40% {
                transform: translate(1px, -1px) rotate(1deg);
            }
            50% {
                transform: translate(-1px, 2px) rotate(-1deg);
            }
            60% {
                transform: translate(-3px, 1px) rotate(0deg);
            }
            70% {
                transform: translate(3px, 1px) rotate(-1deg);
            }
            80% {
                transform: translate(-1px, -1px) rotate(1deg);
            }
            90% {
                transform: translate(1px, 2px) rotate(0deg);
            }
            100% {
                transform: translate(1px, -2px) rotate(0deg);
            }
        }
        
        img {
            margin-left: 500px;
            margin-top: 200px;
        }
    </style>
</head>

<body> <img src="img2.jpg" width="500" height="200"> </body>

</html>

 

We have used hover as an attribute because whenever we place our pointer it starts to shake. And whenever we define properties for animation we use @keyframes as a keyword. And we can also change many styles in animation from one set of CSS to another.

We specify the style change in percentage where 0% is the beginning of the animation. And 100% depicts the end of the animation. We use various animation properties to control the appearance of the animation.

You may also read,

The margin attribute is used to adjust the appearance of the image on our web page. It can adjust our left and right margins of our image. The percentage defines when we place our pointer what action and how much displacement image shows in pixels.

I hope you understand the code well. Feel free to ask your doubts in the comments section. Now you can run the code on your browser to see the result. You can see the image shake when you hover on it.

 

Leave a Reply

Your email address will not be published. Required fields are marked *