[Geek Stuff] CSS - Animated Social Icon Links

Have you played with these little icons at the top my blog before? If you haven't, go ahead, do it. I personally find them to be amusing. Anyway, the code is rather simple, and I wanted to to show you how I did it in case you want to do it yourself!

Here is the full code:

<style>
{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
 
body {
  background: #333;
}

 
.pic {
  border: 0px; 
  float: left;
  height: 75px;
  width: 75px;
  margin: 0px;
  overflow: hidden;
  opacity: 0.75;
}

.pic:hover {
  border: 0px; 
  float: left;
  height: 75px;
  width: 75px;
  margin: 0px;
  overflow: hidden;
  opacity: 1;
}


/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
  width:150px;  
  
}

</style>

The class .pic is pretty standard. I set the opacity to 0.75 (or 75%) for .pic and 1 (or 100%) for .pic:hover. As you may have guessed, this means that the icon will be semi-transparent when left alone, and will become opaque once a cursor hovers over it.

As you can see, I used a webkit for the rotation. This will show up at the beginning of the code and also under /*TILT*/. Under .tilt, I set the transition time to 0.5 seconds, and under .tilt:hover, I set the rotation to 360 degrees to suit the specific effect I was going for. These can be changed to whatever you'd like. Play around with it and see what you may find. Also under .tilt:hover you'll find the trick I used for getting the icons to separate when hovered over. 

Notice how under .pic, the width and height are set to 75px. However, under .tilt:hover, the width is set to 150px. Crazily enough, this actually works as long as you have a transparent background and no border. Of course, you can set the widths to whatever you'd like, but as a rule of thumb I make the hover width double that of the image width for nice, even-looking spacing when the icons separate. Perhaps if you had a wider-spaced slew of smaller social icons, you could also add an enlargement effect with a transition time so the icon "zooms" larger when you hover over it (something I thought of doing but didn't employ myself).

And then, as might be normally expected, here is a code sample for one of the icons (URL obviously changed).



<div class="tilt pic> <a href="https://www.youtube.com/" target="_blank"> <img src="http://imageshack.com/a/img577/1897/fo6b.png" width="75" height="75" /> </a> </div>


As you can see in this example, the size of the image is rescaled to 75x75 to match the sizing on the style sheet. You can resize your icons to whatever you want, but make sure the sizing is the same in the style sheet, or the separation-upon-hover trick won't work properly. Since I really only have six icons in this example, 75px works quite well. Notice also the div class is "tilt pic". This selects the .pic and .tilt classes to be applied simultaneously to the icon. The div should be done separately for each icon. I tried grouping before, and it didn't work smoothly with every browser. Keeping them separated will ensure consistent operation across a multitude of browsers.

Uploading the icons to your own photohosting account (such Photobucket) will ensure the links don't get broken later on. There are several sites where you can find entire packages of various social networking icons. 

It's simple, but simple is how I like to operate!

Anyway, I hope you enjoyed this.