How to Add Vibrating/Shaking Hover Effect to Blogger Post Image

If you want to know, How to add vibrating hover effect to picture post?Today I will show you How to Add Shaking Hover Effect to Blogger Post Image

Hello Guys, Welcome to the Mironiyar blogger tutorial. If you want to know, How to add vibrating hover effect to picture post? Then you have come to the right place.
Today I will show you How to Add Vibrating Hover Effect to Blogger Post Image (Shaking Hover Effect)

How to Add Vibrating Hover Effect on Post Image

How to Add Vibrating Hover Effect to Blogger Post Image (Shaking Hover Effect)

We often see on many websites that the image vibrates when you touch an image of that website. It's good to see. This type of vibration in a website image is usually called a Shaking hover effect.

Shaking Hover Effect Demo :

How to Add Shaking Hover Effect on Post Image in 3 Steps

Step 1: Copy the complete css code from the code box below.

Step 2.1: Let's go to Blogger's Desboard. Now click on Blogger's Theme option.

How to Add Shaking Hover Effect on Post Image

Step 2.2: Clicking the Edit Html button will open a page.

How to Add Vibrating Hover Effect to Blogger Post Image (Shaking Hover Effect)

Step 2.3: Click anywhere on that page and press ctrl + F . Search '</b:skin>' in the search box.

How to Add Vibrating Hover Effect to Blogger Post Image (Shaking Hover Effect)

Step 3: Paste the copied css code before the </b:skin> .In the last step, save the template by clicking the save button.

Vibrating/Shaking Hover Effect CSS Code

.post-body a img:hover{animation: MahedulShake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px}@keyframes MahedulShake{10%,90%{transform: translate3d(-1px,0,0)}20%,80%
{transform: translate3d(2px,0,0)}30%,50%,70%{transform: translate3d(-4px,0,0)}40%,60%
{transform: translate3d(4px, 0, 0)}}@-webkit-keyframes MahedulShake{10%,90%{transform: translate3d(-1px,0,0)}20%,80%{transform: translate3d(2px,0,0)}30%,50%,70%{transform: translate3d(-4px,0,0)}40%,60%
{transform: translate3d(4px,0,0)}}

Always keep a backup of the template in the XML file. As a result, if there is a problem with the XML file, the problem can be solved with the backup XML file.