<!-- Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<!-- Main Body -->
<div class="frame">
<!-- Famous Stack of Images-->
<div class="area on">
<img class="image one" src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>
<div class="area tw">
<img class="image two" src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
</div>
<div class="area th">
<img class="image three" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
</div>
<div class="area fo">
<img class="image four" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
</div>
<div class="area fi">
<img class="image five" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
</div>
<div class="title"></div>
<header class="text">Pixar - The Hall of Fame</header>
</div>
body{
background: linear-gradient(to left,#808080,#B2B2B2);
font-family: 'Hammersmith One', sans-serif;
}
.frame{
width:640px;
height:320px;
position:absolute;
margin-left:20%;
margin-top:15%;
}
.image{
position:absolute;
box-shadow:5px 5px 20px #333333;
border-radius:4px;
cursor:pointer;
opacity:0.7;
transform-origin: 50% 100%;
transition: 0.5s ease all;
transform:perspective(500px) rotateX(50deg);
}
.area:hover .image{
opacity:1;
transition: 0.5s ease all;
transform:perspective(500px) rotateX(0deg);
margin-top:-100px;
z-index:1;
}
.title{
width:640px;
height:50px;
background:linear-gradient(to right,grey, black);
position:absolute;
margin-top:320px;
z-index:1;
opacity:0;
transition: 0.5s ease all;
}
.frame:hover .title{
opacity:0.5;
box-shadow:0px -5px 5px black;
transition: 1s ease all;
}
.text{
color:white;
font-size:2em;
margin-left:20%;
margin-top:325px;
position:absolute;
opacity:0;
z-index:1;
text-transform: uppercase;
transition: 1s ease all;
}
.frame:hover .text{
opacity:0.8;
transition: 1s ease all;
}
.area{
width:640px;
height:64px;
position:absolute;
}
.on{
margin-top:260px;
}
.tw{
margin-top:195px;
}
.th{
margin-top:130px
}
.fo{
margin-top:65px
}
.fi{
margin-top:0px
}
.image{
margin-top:-260px;
}
// No JavaScript
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.