<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.