January 14, 2014

Weebly Tricks #9 - Rotating Icons on Mouseover

Posted by Domz at 1/14/2014

Add a rotating photo to Weebly


Using social network icons has a very good impact to your website. Besides their color, why not give them some effects that makes them more appealing to be clicked. So what about icons that rotates when you hover your mouse pointer over them? They are cute, better check them out. This could add some spices to your Weebly site. The size of the icon and the rotating effect matters so better check the demo.








Here are very quick steps:

1.  I will give same credits to the owner of the icons which can be obtained here.

2. Unzip the file you downloaded and select the best size you prefer.

3. Go to edit CSS/ HTML and upload the icons with the size of your choice.

4. After uploading, go to <head>, note I told you read the articles about editing the <head> first. So assuming you found it, either in site, lay out or page, enter the following codes:
<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-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;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

5. Now to add the icons appearing to your page, drag an “embed code” element and insert ANY of the following code:

a. 360 degree spin
<p id="socialicons">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/yahoo.png" /></a>
</p>

b. 60 degree spin
<p id="socialicons2">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/yahoo.png" /></a>
</p>

c. -360 degree spin
<p id="socialicons3">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://theweeblytricks.weebly.com/files/theme/yahoo.png" /></a>
</p>

6. Change the following:

http://www.dynamicdrive.com  -with you Fan Page or Twitter Page depends on the icon.
http://theweeblytricks.weebly.com - with your Weebly Site.

7. You are done!! Easy right?


Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top