How To Add Auto Refresh System On My Blogge site

How to Add Vibrating Hover Effect on Post Image

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.

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

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

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.