Web Development. Client Satisfaction. Web Consultancy. Professional. UX. Fast. Responsive Design. Dynamic. Interactive. Innovative. Ecommerce. Wordpress plugins. Prestashop modules. You name it.

Create Nice Social Media Icons Animation CSS

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.    
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
*/?>