How To Add Spinning Image Effect On Hover Mouse To Blogger | Tech Blog Guide - The Ultimate Guide To Technology World! Tech Blog Guide - The Ultimate Guide To Technology World!: How To Add Spinning Image Effect On Hover Mouse To Blogger
Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

LiveZilla Live Help

Tamanna

Monday, July 1, 2013

How To Add Spinning Image Effect On Hover Mouse To Blogger

Hi, readers! Adding some style able effect to your blog can make attract your visitors.Today we are going to publish about about "How To add Image Spinning Effect On Hover Mouse To Blogger".This trick is very short and simple for every blogger.In our previous posts, we shared about "Add Rotating Page Effect To Your Blog Web Page" and "Awesome CSS3 Widget With Zoom And Shrinking Effect" which may like many of our readers.Putting this effect on your blog visitors might want to check your more images/pictures to see more special effects.Thanks a lot for realcombiz.com who created this awesome tricks for blogger.Hope my readers will like this one awesome tricks.
So, guys without wasting valuable time just follow our easy steps and you are done:)

                                                LIVE DEMO BELOW








                               


Adding Image Spinning Effect On Hover Mouse To Blogger.


  • Log In To Blogger.com
  • Go To Your Blogger Dashboard
  • Navigate To Template And Click On Edit HTML> Proceed
  • Find The Given Below Code Using CTRL + F

]]></b:skin>

  • Now Paste The Code Before ]]></b:skin>

.spinningeffect img {
 /* Image Spinning Effect Trick Shared By www.TechBlogGuide.Blogspot.com */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.spinningeffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
 If You Want To Change The Rate (Time Taken) At Which The Image Rotate/Spin Simple Edit 0.8s
You can The Degree Of Of Spinning Image Also At Which The Image Rotate/Spin By Changing 360deg

How To Use It On Images?

When Ever You Want To Appear This Effect On Your Image Simply Do The Given Below Steps:

  • Go To Your Blogger Dashboard
  • Navigate To Posts And Click On New Post Button
  • You Will See Blank Box And Now Click On Edit HTML Button At Left  Side
  • Paste The Following Code Inside The Blank Box Where You Want To Show Rotate/Spin Image Effect On Your Posts.

<a class="spinningeffect" href="IMAGE-URL/" target="_blank">
<img src="IMAGE-URL/" /></a>
Now Upload Your Image To Blogger Post And Replace IMAGE-URL/ With Your Image Link


Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB

0 comments:

POST A COMMENT

Contact Us

Name

Email *

Message *

 

About Author

Hello! This is Md. Asad Reza, the owner and administrator of this blog, who lives in Janakpur, Nepal.I am Part Time bogger and web designe.I've started blogging in 2012.I learned the important things on blogger.I loves to coding.

About Us

Recent Comment

Copyright © . SkillBlogger. All Rights Reserved.
Designed by :-Way2themes