Rollover Social Media Icons

Rollover Social Media Icons

Rollover Social Media Icons looks great, These are fully made by CSS, I will provide the code for both Rollover Slide Social Media Icons & Rollover Spinning Social Media Icons. Both has it's own attraction. If you want to see the live demo of both of these type of icons, Click on Live Preview button below.

Live Preview

Rollover Slide Social Media Icons
When we will hover the mouse on Slide Social Media Icons, They will become colored in a very beautiful style.
Following Code is for Rollover Slide Social Media Icons.

CSS Code

.slidesocialicons li {
padding:0;
cursor:pointer;
display:inline-block;
width:48px;
height:48px;
background-image:url('http://4.bp.blogspot.com/-f87EvEUWQsk/Un8u2CZzBQI/AAAAAAAAA8Q/cXRy19Y1920/s1600/Slide+Social+Icons+-+MYBN.png');
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right:1px;

} .slidesocialicons li:hover {
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

.slidesocialicons li.facebook {
background-position:0 0; }
.slidesocialicons li.facebook:hover {
background-position:0 -48px;
}
.slidesocialicons li.twitter {
background-position: -48px 0;
}
.slidesocialicons li.twitter:hover {
background-position: -48px -48px;
}
.slidesocialicons li.rss {
background-position: -96px 0;
}
.slidesocialicons li.rss:hover {
background-position: -96px -48px;
}
.slidesocialicons li.google {
background-position:-144px 0;
}
.slidesocialicons li.google:hover {
background-position:-144px -48px;
}
.slidesocialicons li.linkedin {
background-position: -192px 0;
}
.slidesocialicons li.linkedin:hover {
background-position: -192px -48px;
}
.slidesocialicons li.pinterest {
background-position: -240px 0;
}
.slidesocialicons li.pinterest:hover {
background-position: -240px -48px;
}
.slidesocialicons li.stumbleupon {
background-position: -288px 0;
}
.slidesocialicons li.stumbleupon:hover {
background-position: -288px -48px;
}
.slidesocialicons li.reditt {
background-position: -336px 0;
}
.slidesocialicons li.reditt:hover {
background-position: -336px -48px;
}
.slidesocialicons li.instagram {
background-position: -384px 0;
}
.slidesocialicons li.instagram:hover {
background-position: -384px -48px;
}
.slidesocialicons li.tumblr {
background-position: -432px 0;
}
.slidesocialicons li.tumblr:hover {
background-position: -432px -48px;
}

I've used background-property to display all icons, instead of pasting all the links of images again and again in Html Code.

HTML CODE

<div class="slidesocialicons">
<ul>
<li class="facebook"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="twitter"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="rss"<a href="https://www.google.com/" target="_blank"></a></li>
<li class="google"<a href="https://www.google.com/"target="_blank"></a></li>
<li class="linkedin"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="pinterest"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="stumbleupon"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="reditt"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="instagram"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="tumblr"><a href="https://www.google.com/" target="_blank"></a></li>
</ul> </div>

Now if we want to display any icon, We will just use the above code and if we don't want to display any icon. We will simply remove it from html.


Rollover Spinning Social Media Icons
When we will hover the mouse on these, They will change their color with spinning effect. You can see on the demo by clicking on Live Preview button above.

Following Code For Rollover Spinning Social Media Icons

CSS Code

.spinsocialicons li {
padding:0;
cursor:pointer;
display:inline-block;
width:48px;
height:48px;
background-image:url('http://4.bp.blogspot.com/-f87EvEUWQsk/Un8u2CZzBQI/AAAAAAAAA8Q/cXRy19Y1920/s1600/spin+Social+Icons+-+MYBN.png');
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.spinsocialicons li:hover {
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.spinsocialicons li.facebook {
background-position:0 0;
}
.spinsocialicons li.facebook:hover {
background-position:0 -48px;
}
.spinsocialicons li.twitter {
background-position: -48px 0;
}
.spinsocialicons li.twitter:hover {
background-position: -48px -48px;
}
.spinsocialicons li.rss {
background-position: -96px 0;
}
.spinsocialicons li.rss:hover {
background-position: -96px -48px;
}
.spinsocialicons li.google {
background-position:-144px 0;
}
.spinsocialicons li.google:hover {
background-position:-144px -48px;
}
.spinsocialicons li.linkedin {
background-position: -192px 0;
}
.spinsocialicons li.linkedin:hover {
background-position: -192px -48px;
}
.spinsocialicons li.pinterest {
background-position: -240px 0;
}
.spinsocialicons li.pinterest:hover {
background-position: -240px -48px;
}
.spinsocialicons li.stumbleupon {
background-position: -288px 0;
}
.spinsocialicons li.stumbleupon:hover {
background-position: -288px -48px;
}
.spinsocialicons li.reditt {
background-position: -336px 0;
}
.spinsocialicons li.reditt:hover {
background-position: -336px -48px;
}
.spinsocialicons li.instagram {
background-position: -384px 0;
}
.spinsocialicons li.instagram:hover {
background-position: -384px -48px;
}
.spinsocialicons li.tumblr {
background-position: -432px 0;
}
.spinsocialicons li.tumblr:hover {
background-position: -432px -48px;
}

HTML CODE

<div class="spinsocialicons">
<ul>
<li class="facebook"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="twitter"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="rss"<a href="https://www.google.com/" target="_blank"></a></li>
<li class="google"<a href="https://www.google.com/"target="_blank"></a></li>
<li class="linkedin"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="pinterest"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="stumbleupon"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="reditt"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="instagram"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="tumblr"><a href="https://www.google.com/" target="_blank"></a></li>
</ul>
</div>

Removing Any Icon
If you want to remove any icon from all icons. For example, You want to remove pinterest icon or any other. You will simply remove the following code
  <li class="linkedin"><a href="https://www.google.com/" target="_blank"></a></li>
And Pinterest Icon will be removed.



If you also want to make your own icons with this hover effect, Stay Tuned with us. We Will soon make a tutorial on Making these type of icons using background-property.