How Add CSS To Enlarge image by hovering mouse

In Blog today, they are the number one platform for publishing lots of services. But there are many tips that are hidden. One of them is enlarging image, when you add some CSS just to hovering the mouse over the image. Mostly, when bloggers normally add image to their blog page/post then sometimes the quality of image will not remain original and the pixels get scattered, yes that is fact. By the help of this tricks one can easily show the good quality graphics on their blog page or post. As the reader hovers the mouse on the image the image will automatically enlarge and the quality of the image will not effect. It is a useful tricks for bloggers who have Pictures blog.

Steps to be taking when 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.skye-blog.blogspot.com-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.skye-blog.blogspot.com-end animated hover–>

Step 4
    Now save the template and you are done.

Step 5
    Now just add the this code to see the effect.

        <div class =’Skye Concept’>
        <image source>
        </div> 

You can easily find the HTML section of your post body by clicking on Edit HTML beside the compose button.