Social icons Rollover hover effect using CSS

 

Rollover social icons

Rollover social icons

Social icons in a site or blog holds a important place in turning the visitors to followers and adding hover effects to those icons increase the chance. So we are going to see a cool hover effect that can be used with social icons to perform the assigned job. The above hover effect requires a special image in which two images should be spliced in a vertical manner.

facebook

Spliced Social icons

We are going to use similar vertically spliced images in this hover effect. The above image was formed by means of two images vertically spliced in order to perform a rollover effect when the image is hovered.

CSS

.roll_over{ height: 48px; width: 48px; margin: 5px; float: left;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.roll_over:hover {
background-position: 0px -48px;
}
.facebook{
background-image:url('Your image URL');
}
.twitter{
background-image:url('Your image URL');
}
.google_plus{
background-image:url('Your Image URL');
}
.linkedin{
background-image:url('Your Image URL');
}
.pinterest{
background-image:url('Your Image URL');

HTML

<a href="Social Profile URL"><div class="facebook roll_over"></div></a>
<a href="Social Profile URL"><div class="twitter roll_over"></div></a> 
<a href="Social Profile URL"><div class="google_plus roll_over"></div></a> 
<a href="Social Profile URL"><div class="linkedin roll_over"></div></a>
<a href="Social Profile URL"><div class="pinterest roll_over"></div></a>

 

In the above code class “roll_over” was used to assign the height and width of the background image used. And when the image is hovered the height was assigned by means of negative value to display the next image hiding. Other classes “.facebook”, “.twitter” … “.pinterest” was used to assign the URL of the image used for the effect.

The working demo & spliced images was added for your usage and you can obtain it here:

– See more at: Gadgetronicx

 

Leave a Reply

Your email address will not be published. Required fields are marked *