<ul>
<li>
  <h1>3</h1>
  <span>Lorem ipsum dolor.</span>
  <a href="#"><span>Clique aqui</span></a>
</li>
<li>
  <h1>2</h1>
  <span>Lorem ipsum dolor.</span>
  <a href="#"><span>Clique aqui</span></a>
</li>
<li>
  <h1>1</h1>
  <span>Lorem ipsum dolor.</span>
  <a href="#">Clique aqui</a>
</li>
</ul>

html, body * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color:#1f2c38;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
ul {
  list-style:none;
  text-align:center;
  position: absolute;
/*   transform: translate(-50%,-50%); */
  left: 50%;
  top: 50%;
  margin-left: -125px;
  margin-top: -180px;
  
}
h1, span, a {
  z-index: 99;
    position: relative;
}
ul li {
  display: block;
  position: absolute;
  background-color: #fefefe;
  width: 250px;
  height: 320px;
  top: 0;
  left: 0;
  transform:  rotate(10deg) skew(-60deg);
  transform-origin:bottom center;
  box-shadow:10px 10px 30px rgba(0,0,0,0.3) ;
  transition:.4s;
  z-index: -1;
  overflow: hidden;
}
ul li:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: rgb(40,255,247);
background: -moz-linear-gradient(45deg, rgba(40,255,247,1) 0%, rgba(129,40,255,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(40,255,247,1) 0%,rgba(129,40,255,1) 100%);
background: linear-gradient(45deg, rgba(40,255,247,1) 0%,rgba(129,40,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28fff7', endColorstr='#8128ff',GradientType=1 );
transition:.6s;

}

ul li h1 {
  font-size: 7.2em;
  background: -webkit-linear-gradient(#28fff7, #8128ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 50px;
  transition:.4s;
}
ul li > span {
  font-size:1.3em;
  color: #999;
}
ul li  a {
  display: inline-block;
  padding: 10px 20px;
  top: 40px;
  border: 1px solid #fff;
  transition: all .7s cubic-bezier(0.68, 0, 0.265, 1.55);
  color: #fff;
  text-decoration: none;
  transform:scale(0);
  position: relative;
  overflow: hidden;
}
ul li a:after {
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  transform-origin:center top;
  background-color: rgba(0,0,0,0.3);
  border-radius:100% 0 0 0;
  transition: all 0.6s linear;
}
ul li:hover a:hover:after {
  height:1000%;
  width: 100%;
  position: absolute;
}
ul li a:hover {
  border-color: transparent;
  transform:scale(1.2) !important;
}
ul li:nth-child(1) {
   transform:  rotate(20deg) skew(-20deg) translate(10px,10px); 
}
ul li:nth-child(2) {
   transform:  rotate(20deg) skew(-20deg) translate(0px,0px); 
}
ul li:nth-child(3) {
   transform:  rotate(20deg) skew(-20deg) translate(-10px,-10px); 
}

ul:hover li:nth-child(1) {
   transform:  rotate(40deg) skew(0) translate(100px,0) ; 
}
ul:hover li:nth-child(2) {
   transform:  rotate(0) skew(0); 
}
ul:hover li:nth-child(3) {
   transform:  rotate(-40deg) skew(0) translate(-100px,0) ; 
}
ul:hover li:hover {
  z-index: 9;
  background-color: #0e1826;
  box-shadow:10px 10px 40px rgba(0,0,0,0.5) ;
  
} 

ul:hover li:hover a {
  top: 30px;
  transform:scale(1);
}
ul:hover li:hover:after {
  height:100%;
/*   transform:skew(30deg); */
}
ul:hover li:hover * {
  color: #fff;
    background: -webkit-linear-gradient(#fff, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

// Nope