Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Social Icons With Hover Effect Using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 244
    Comment on it

    Hello readers , In today's blog we will discuss about the Social Icons .

     

    As we all are linked to the social media which help us to communicate over a vast social network and we can even share video, images, documents, file etc over it among number of people.

     

    So , In my example I have tried to create the Social Icons and had applied hover effect to it such that whenever we hover over the icons it seems to zoom out .

     

    I have tried it by using CSS3 , although in my html code I have created a div with the class name as Social Icon Wrap .

     

    In this div there are nested anchor tag comprising of Facebook , Twitter and YouTube icons class.

    Now to the Social Icon Wrap class I need to set the width and the margin as required.

     

    To the Social Icons class comprising of all the three social icons need to set the width and height. I have also applied transition property to it and an opacity as 0.9.

     

    Now for the social Icons images I have set it through the background by setting its background-color, size and position .

     

    As to the hover effect , I have used transition and transform property and set the box-shadow property over it.

     

    In my example I have also used psuedo-elements i.e before and after over all the three icons with the hover .

     

    To the Facebook icon , I need to set its position to relative , adjusted its height and width and the box-shadow property. I also set a background color to it and a border-radius of 5px.

     

    Now moving over to the twitter icon on hover effect with the help of psuedo-element after to it .

    I need to set its position to relative , again adjusted its height and width with the box-shadow property along with the border-radius . I also need to set its background color and display it to block.

     

    Now for the youtube icon , again I have to adjust its height and width , make its position to relative .

    To this icon I have used psuedo-element before to it , set its background-color and the box-shadow property of CSS3.

     

    Below is the code for the following example :-
     

    <html>
    
    <meta charset="utf-8">
    
    <head>
    
    <title>Social Icons With Hover Effect</title>
    
    </head>
    
    <style>
    
    @import url(http://fonts.googleapis.com/css?family=Bree+Serif);
    
    @import url(http://fonts.googleapis.com/css?family=Open+Sans);
    
    body {
    
    background: #222;
    
    color: #FFF;
    
    }
    
    /* ---------------------------------------- /
    
    / SOCIAL ICONS /
    
    / ---------------------------------------- */
    
    .socialIconWrap {
    
    font-family: 'Bree Serif', 'serif';
    
    color: #EEE;
    
    font-size: 25px;
    
    width: 300px;
    
    margin-left: auto;
    
    margin-right: auto;
    
    margin-bottom: 15px;
    
    }
    
    .socialIcons {
    
    width: 80px;
    
    height: 80px;
    
    float: left;
    
    margin-right: 5px;
    
    margin-top: 0px;
    
    opacity: 0.9;
    
    border-radius: 0px;
    
    transition: 0.6s;
    
    }
    
    .icon_facebook {background: url('images/social_facebook.png') #3B5998; background-size: 40px; background-position: center; background-repeat: no-repeat;}
    
    .icon_twitter {background: url('images/social_twitter.png') #55ACEE; background-size: 60px; background-position: center; background-repeat: no-repeat;}
    
    .icon_youtube {background: url('images/social_youtube.png') #cd201f; background-size: 100px; background-position: center; background-repeat: no-repeat;}
    
    .socialIcons:hover {
    
    opacity: 1.0;
    
    transition: 0.6s;
    
    transform: scale(1.1);
    
    -ms-transform: scale(1.1);
    
    -webkit-transform: scale(1.1);
    
    -webkit-box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    -moz-box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    }
    
    //.icon_facebook:hover::after {
    
    content: 'FaceBook';
    
    position: relative;
    
    display: block;
    
    padding: 5px;
    
    width: 110px;
    
    text-align: center;
    
    background: #3B5998;
    
    color: #FFF;
    
    top: 90px;
    
    margin-left: -20px;
    
    border-radius: 5px;
    
    font-size: 20px;
    
    font-family: 'Bree Serif', 'serif';
    
    -webkit-box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    -moz-box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    }
    
    //.icon_twitter:hover::after {
    
    content: 'Twitter';
    
    position: relative;
    
    display: block;
    
    padding: 5px;
    
    color: #FFF;
    
    width: 110px;
    
    text-align: center;
    
    background: #55ACEE;
    
    top: 90px;
    
    border-radius: 5px;
    
    margin-left: -20px;
    
    font-size: 20px;
    
    font-family: 'Bree Serif', 'serif';
    
    -webkit-box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    -moz-box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    }
    
    //.icon_youtube:hover::before {
    
    content: 'YouTube';
    
    position: relative;
    
    display: block;
    
    padding: 5px;
    
    width: 110px;
    
    text-align: center;
    
    color: #FFF;
    
    background: #cd201f;
    
    top: 90px;
    
    border-radius: 5px;
    
    margin-left: -20px;
    
    font-size: 20px;
    
    font-family: 'Bree Serif', 'serif';
    
    -webkit-box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    -moz-box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    box-shadow: 0px 9px 22px -1px rgba(0,0,0,0.67);
    
    }
    
    </style>
    
    <body>
    
    <div class="container">
    
    <div class="socialIconWrap">
    
    <h1>Find us on </h1>
    
    <a href="#"><div class="socialIcons icon_facebook"></div></a>
    
    <a href="#"><div class="socialIcons icon_twitter"></div></a>
    
    <a href="#"><div class="socialIcons icon_youtube"></div></a>
    
    </div>
    
    </div>
    
    </body>
    
    </html>

     

    Conclusion:-

     

    Hence, I have created Social Icons with hover effect using CSS and CSS3 property which was easy to learn and understand.

     

    Note:- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: