Create Nice Social Media Icons Animation CSS
Creating a nice social media icons animation can help you increase the social media engagement and probably this is one of the most important thing for you if you want your shop or blog to get more and more visitors. Animations are very important for a user because he will think that you made a great job with your website so the trust for your website will increase and the second reason you should add animations yo your website is because them make your website look alive and the interaction with your visitors it's more pleasant.
To see the animation you can watch the bottom video, let's start with the implementation which it's very easy and it will take just few minutes to add it on your website.
Social Media Icons Animation
First part of the animation is the HTML code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<div class="icon"><i class="fa fa-linkedin-square"></i></div>
</div>
</div>
<div class="face face2">
<div class="content">
<h3><a href="#">@linkedin</a></h3>
<p>Lorem ipsum sit dolor amet</p>
</div>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<div class="icon"><i class="fa fa-twitter-square"></i></div>
</div>
</div>
<div class="face face2">
<div class="content">
<h3><a href="#">@twitter</a></h3>
<p>Lorem ipsum sit dolor amet</p>
</div>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<div class="icon"><i class="fa fa-github-square"></i></div>
</div>
</div>
<div class="face face2">
<div class="content">
<h3><a href="#">@github</a></h3>
<p>Lorem ipsum sit dolor amet</p>
</div>
</div>
</div>
</div>
</body>
</html>
And now let's add few lines of CSS:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:#ffde59;
margin:0;
padding:0;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Open Sans';
min-height:100vh;
}
.container{
width:1000px;
position: relative;
display:flex;
justify-content: space-between;
}
.container .card{
position:relative;
border-radius: 10px;
}
.container .card .icon{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#f00;
transition: 0.7s;
z-index:1;
}
.container .card:nth-child(1) .icon{
background:#e07768;
}
.container .card:nth-child(2) .icon{
background:#6eadd4;
}
.container .card:nth-child(3) .icon{
background:#4aada9;
}
.container .card .icon .fa{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size: 80px;
transition:0.7s;
color:#fff;
}
.container .card .face{
width: 300px;
height:200px;
transition:0.5s;
}
.container .card .face.face1{
position: relative;
background:#333;
display:flex;
justify-content: center;
align-items: center;
z-index:1;
transform:translateY(100px);
}
.container .card:hover .face.face1{
background:#ff0057;
transform:translateY(0);
}
.container .card .face.face1 .content{
opacity: 1;
transition:0.5s;
}
.container .card:hover .face.face1 .content{
opacity: 1;
}
.container .card .face.face1 .content i{
max-width: 100px;
}
.container .card .face.face2{
position: relative;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-shadow: 0 20px 50px rgba(0,0,0,0.8);
transform:translateY(-100px);
}
.container .card:hover .face.face2{
transform:translateY(0);
}
.container .card .face.face2 .content p{
margin:0;
padding:0;
text-align:center;
color:#414141;
}
.container .card .face.face2 .content h3{
margin:0 0 10px 0;
padding:0;
color:#fff;
font-size: 24px;
text-align: center;
color:#414141;
}
.container a{
text-decoration: none;
color:#414141;
}
That's it. Let me know what you think in the comments section.