Social media icons Rollover hover effect using CSS

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
social-media-icons-rollover-effect
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 social media rollover hover effect requires a special image in which two images should be spliced in a vertical manner.

spliced-social-icon
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 CODE:

.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 CODE: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.

HTML CODE:

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

The HTML part was pretty straightforward, here the class “.roll over” & “.facebook” used in a single <div> container to use the properties of both the classes.The working demo & spliced images was added for your usage and you can get it here

Rollover Social Icons
Rollover Social Icons
Rollover Social icons(2).rar
Version: 1
22.9 KB
2 Downloads
Details

Do check the Image hover effects collection for lots of cool hover effects using simple CSS and HTML.

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest

Related Designs and Schematics

Rollover Social Icons
Rollover Social Icons
Rollover Social icons(2).rar
Version: 1
22.9 KB
2 Downloads
Details
The following two tabs change content below.

Frank Donald

Junior Network Engineer at Tata Communications
Frank Donald is an Electronics and Communication Engineer who is very passionate about his subject. Reading, Surfing and Blogging are the things he loves.

Ask your query

3 Comments on "Social media icons Rollover hover effect using CSS"

Notify of
avatar
Sort by:   newest | oldest | most voted
Developer
Guest

Nice tutorial. Very well explained.

Anonymous
Guest

Using ‘div’ inside of ‘a’ is incorrect. It will not be validated.

Paul-Inge Flakstad
Guest

One improvement here would be losing the div elements, as there’s really no need for them. Another, and bigger improvement would be using just one image (containing all of the social media icons) instead of one image per icon. Reducing the number of images you’re using will have a positive effect on the page’s load time. To anyone reading this, I’d also recommend a different approach: using an icon font (see f.ex. fontello or icomoon).

wpDiscuz