Advanced CSS Social medial hovers Effect With Free Code 2021

In this how to use the pseudo Elements and use CSS3 properties in our applications. We will go through each property line by line and understand the meaning and the output of it in a practical manner.

Here is the code

Go to the folder where you want to store the project.

Here is the complete code of my index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- <div class=" container"> -->
    <ul>
      <li>
        <a href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-facebook-f"></span>
        </a>
      </li>

      <li>
        <a href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-twitter"></span>
        </a>
      </li>

      <li>
        <a href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-instagram"></span>
        </a>
      </li>
      <li>
        <a href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-linkedin-in"></span>
        </a>
      </li>
    </ul>
    <!-- </div> -->
  </body>
</html>

Here is the complete code of my style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #e2e2e2;
}

ul {
  display: flex;
}

ul li {
  position: relative;
  list-style: none;
  width: 60px;
  height: 60px;
  margin: 0 30px;
  transform: rotate(-30deg) skew(25deg);
  background-color: #ccc;
}

ul li span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  font-size: 30px;
  transition: 0.5s;
}

ul li:hover span:nth-child(5) {
  transform: translate(40px, -40px);
  opacity: 1;
}
ul li:hover span:nth-child(4) {
  transform: translate(30px, -30px);
  opacity: 0.8;
}
ul li:hover span:nth-child(3) {
  transform: translate(20px, -20px);
  opacity: 0.6;
}

ul li:hover span:nth-child(2) {
  transform: translate(10px, -10px);
  opacity: 0.4;
}
ul li:hover span:nth-child(1) {
  transform: translate(0, 0);
  opacity: 0.2;
}

ul li:nth-child(1) span {
  background: #3b5999;
}
ul li:nth-child(2) span {
  background: #55acee;
}
ul li:nth-child(3) span {
  background: #e4405f;
}

ul li:nth-child(4) span {
  background: #0077b5;
}

Hope you like this effect

You can download the full code here