How to enlarge image by hovering mouse

Blogger is the number one platform for bloggers and has a lots of services. Some are easily available and some are hidden. One of them is of enlarging image by just hovering the mouse over the image. Mostly when bloggers add image to their blog page or post then sometimes the quality of image will not remain original and the pixels get scattered. By the help of this trick one can easily show the good quality picture on their blog page or post. As the reader hovers the mouse on the image the image will auto enlarge and the quality of the image will not effect. It is a useful tricks for bloggers who have a Picture blog.

To use this enlarging effect on your blog follow these steps -

Step 1 -

Login to your blogger account and go to Design section and then Edit HTML.

Step 2 -

Now search for this code ]]></b:skin>

Step 3 -

Now copy this code and paste just above the ]]></b:skin>

<!–www.tekdig.net-start animated hover–>
.Tekdig img{
-webkit-transform:scale(0.7); /*Webkit 0.8 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.8 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.8 times the original Image size*/
-webkit-transition-duration: 0.6s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.6s; /*Mozilla Animation duration*/
-o-transition-duration: 0.6s; /*Opera Animation duration*/
opacity: 0.7;
margin: 0 8px 4px 0;
}
.Tekdig img:hover{
-webkit-transform:scale(1.2); /*Webkit: 0.6 times the original Image size*/
-moz-transform:scale(1.2); /*Mozilla 0.6 times the original Image size*/
-o-transform:scale(1.2); /*Opera 0.6 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
<!–www.tekdig.net-end animated hover–>

Step 4 -