How to Make Shake Images Effect When Touched

Images can be very important in the world of blogs, this happens because images cannot be separated from a blog post. This is because the presence of images helps readers better understand what is being conveyed by the author. This time I will give a tutorial on how to make blog images move when touched, actually, many masters already know about this method. But because Admin believes there are still many newbies out there (like Admin) who don't really understand how to make it, that's the reason Admin is sharing this tutorial with all of you. In this tutorial there are 2 versions of the tutorial that can be applied to your blog, firstly all images on the blog will move when touched and secondly, only selected images will move when touched. OK, without further ado, let's look at the tutorial below.

How to Make Blog Images Move When Touched (All Images)

Please, friends, open Blogger.
Next, please click Themes >> Edit HTML.
Then place the CSS code below right above the ]]></b:skin> code.

.post-body img{
  display: inherit;
  transform-origin: center center; }
img:hover img{ animation-play-state: running; }

@keyframes img {
  20% { transform: translate(-1px, -5px) rotate(2.5deg); }
  40% { transform: translate(5px, 1px) rotate(-2.5deg); }
  60% { transform: translate(-1px, -5px) rotate(2.5deg); }
  80% { transform: translate(5px, 1px) rotate(-2.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); } }

img:hover{
  animation-name: img;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;}

Finally, friends, please save.

How to Make Blog Images Move When Touched (Certain Images)

Please, friends, open Blogger.
Next, please click Themes >> Edit HTML.
Then place the CSS code below right above the ]]></b:skin> code.

.jirale{
  display: inherit;
  transform-origin: center center; }
.jirale:hover .motubablog{ animation-play-state: running; }

@keyframes jirale{
  20% { transform: translate(-1px, -5px) rotate(2.5deg); }
  40% { transform: translate(5px, 1px) rotate(-2.5deg); }
  60% { transform: translate(-1px, -5px) rotate(2.5deg); }
  80% { transform: translate(5px, 1px) rotate(-2.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); } }

.jirale:hover{
  animation-name: jirale;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;}

Save.
To apply it to a blog post, please insert an image in the blog post.
Make sure it is in HTML View not Compose View.
Add "class=jirale" after the <img code, please see an example of its implementation below.

<img border="0" class="jirale" data-original-height="564" data-original-width="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Y56dUUbyEJbgOh8EkpmmSEQ4I-y9Gf3kXvMD6U7V3ecI_dVI3nmqNGEogD_GwfUOWotIl8CmLoOOHpryl86oU3z4zRrpB100XxXi23M-qHQzlOAcNSMDEo4squBSb6pZf4FuAM6VuEvwGLc1GGO-T5R7c-WQNzRKNXMUux2d7MDaK2hXbjDZcSNp-so/s16000/How%20to%20Make%20Shake%20Images%20Effect%20When%20Touched_jirale.com.png" />

Finally, please publish the article, and certain post images can move.

This tutorial does not apply to blogs that install anti-copy scripts and anti-right-click scripts.

Demo

Conclusion

In today's article, I shared how to How to Make Shake Images Effect When Touched – I hope you liked it and please share it with your friends and follow our blog for more content

Go to Link

CONCLUSION

In this article, I shared with you How to Make Shake Images Effect When Touched. I hope you have liked It. Please do share it with your friends and follow our blog for more.

If you face any problems in Demo, Download or have any questions so feel free to ask me in comments section or join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.