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)