animation hover image

by Joe

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PLumz</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap" rel="stylesheet">

  </head>

  <body>
    <ul>
     <li><a class="snapchat" href="#"><i class="fa" aria-hidden="true">S<img src="http://i.utdstc.com/icons/256/snapchat-android.png" /></i></a>
        
      </li>
    </ul>
  </body>

</html>

CSS

ul li .fa {
  font-family: 'Odibee Sans', cursive;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ccc;
}

ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: flex;

}

ul li {
  list-style: none;
  margin: 0 40px;

}

ul li .fa {
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;

}

ul li a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0, 0);
  transition: .5s;
  box-shadow: -20px 20px 10px rgb(0, 0, 0, 0.5);
}

ul li a::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #b1b1b1;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
}

ul li a::after {
  content: "";
  position: absolute;
  top: 80px;
  left: -11px;
  height: 20px;
  width: 100%;
  background: #b1b1b1;
  transition: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
  box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}

ul li:hover .fa {
  color: #fff;
}

ul li a:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
  box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}

ul li:hover:nth-child(1) a {
  background: #55acee;
}

ul li:hover:nth-child(1) a:before {
  background: #4184b7;
}

ul li:hover:nth-child(1) a:after {
  background: #4d9fde;
}


a.snapchat img {
  position: absolute;
  opacity: 0;
  width: 100px;
  height: 100px;
  left: 0;
  top: -20px;
  transition: opacity .5s, top .5s;
   z-index:500;
  
}

a.snapchat:hover img {
  opacity: 1;
  top: 20px;
  z-index:500;
}