How to Make Animated Image Effect Vibrate When touched by the Cursor (Image Shake)

 

How to make the image effect vibrate when touched by the cursor (image shake) - make the image vibrate on the blog when hovered, you can do this to make the blog page look more attractive and look professional.

but to be honest, for some reason, there are still many out there who haven't made a tutorial on "how to make an image vibrate or shake"

even though in fact there are already many well-known blogs that make their images vibrate when touched by the cursor, for example just like the blog MBA Igniel.com

If you have frequently visited the igniel.com blog, of course, you will find a special attraction, that is, when you point the cursor at one of Ms. Igniel's pictures, the image will vibrate or shake.

well, the animation effect on the image is called  the image shake effect or image shake

But before continuing to make animated image-shaking effects, what are the benefits of this image shake?

Here are the advantages of creating an image shake on the blog

• Of course, it will add value to its own charm on your blog
• make visitors feel at home for a long time on the blog
• create its own characteristics and have an impact on your blog, it will be easy for visitors to remember
• the blog looks more professional if it uses a moving image animation
• besides looking professional, the blog will also look cool and unique, but it will not reduce the SEO value and blog loading speed

"Wow, how cool is that?"

yes, because apart from creating quality content, we also have to make visitors feel comfortable and feel at home. Besides, adding this image effect also doesn't burden the loading of the blog, because only CSS is used, not JavaScript

"How come visitors can feel at home when using an animated image shake effect"

Obviously, it's only natural that visitors will feel at home if the blog looks unique? especially if visitors accidentally touch and point the cursor at the image, as a result, surely they will try to touch the cursor to the image a second time, or many times

at least make visitors engrossed in their own posts buddy

okay, then how do you make this vibrating image shake effect? see tutorial below

how to make an animated vibrating picture effect

To create a shake animation for images on the blog, we just need to add some CSS in the blog's Html, here's how:

Go to Blogger Dashboard

select the Theme menu on the left, then select edit Html

in the Html column, please look for the code </head>

• then, copy all the CSS code below to create an animated vibrating image effect and place it right ABOVE the code</head> 

<style>
    /* vibrating picture effect animation by web.NiaDZGN.com */ 
    img:hover {animation: shake 0.5s;animation-iteration-count: 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(-1deg); }} </style>

• then save or save Html

Now that's how to make animated vibrating effects on images, just enough to add this light CSS, guaranteeing visitors will be comfortable and feel at home for a long time on the blog, friends

But wait a minute, I think you are still unsure about making a vibrating effect in this image, maybe some of the FAQs below can help with what you feel

Frequently Asked Questions

1. Will the code for creating an animated shake image effect slow down the loading of the blog?

No, it won't have the slightest bad influence, making this animated vibrating image effect using only CSS, and if you see, I have also minified or reduced the code, so it won't slow down the loading of the blog

2. If you have installed this image shake effect, how about the DEMO?

for a demo, please click here and try to see what happens to the image there? if the image vibrates, then that's the demo

3. Will this image shake effect only makes the blog look unattractive?

of course not, as explained above, on the contrary, this swaying image effect will add to the uniqueness of your own blog

4. How will this image effect work?

The shaking effect will work if the cursor is touched so that when the mouse cursor is pointed at the image, this will make the animation of the vibrating effect on the image work.

5. Will the image also vibrate when touched with a finger on a cell phone or mobile?

Yes, the image will also vibrate when touched with a finger, but note that the vibrating effect will disappear if the image is not touched

6. If the shake effect makes the blog more interesting, is there any proof?

Yes, one of the well-known blogs that also uses animation for image shake is Ms. Igniel's blog, you can check and visit her blog directly (https://www.igniel.com/)https://www.igniel.com/)

7. is there a special code that is entered when creating an article?

nothing, just enter the code above, no need to add any code, just input the image, as usual, simple right?

8. Lastly... is it permissible to share and share the code that makes the vibrating image effect animation on the blog?

Of course, it's even highly recommended to share this method, but remember, friend, don't forget to provide the source too, at least you have helped the development of this blog

OK, what now?

I think some of the questions above have helped your doubts, buddy, just believe me! CSS will not slow down your blog, especially if it has been minimized

if you're still not sure, just like this, try checking the speed of this blog at (https://developers.google.com/speed/pagespeed/insights/)https://developers.google.com/speed/pagespeed/insights/)

maybe the results will change, but I just checked the page speed is at least 96! already above average

OK, friend, that's all for the tutorial on how to make an animated image effect vibrate when touched by the cursor (image shake), I hope this is useful and successful, if you still have doubts that you want to ask, please ask in the comments column