<!-- 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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.