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.

0 comments:

Are you confused or just want to tell us you visited? Feel free to comment

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Thinking of spamming here?:
Please do not spam Spam comments will be deleted immediately upon our review. So why waste your time?

Regards,
Enoch

Kindly use this button below to get this my article on your computer:

Print Friendly and PDF

You can also read this Related Posts



Best Blogger Tips

Post a Comment

Join me on Facebook Follow me on Twitter Follow me on Digg Follow on BlogCatalog Follow me on MySpace Subscribe to RSS Email me

Blog Archives

Google+

Google+

Followers