Movie Picker

index.html

<div id="wrapper">
  
  <div id="amelie" class="item">
    <a href="#amelie"><span class="case"><img src="http://s.cdpn.io/79/movie-amelie.jpg" /></span></a>
  </div>
  
  <div id="bruno" class="item">
    <a href="#bruno"><span class="case"><img src="http://s.cdpn.io/79/movie-goats.jpg" /></span></a>
  </div>
  
  <div id="american-beauty" class="item">
    <a href="#american-beauty"><span class="case"><img src="http://s.cdpn.io/79/movie-americanbeauty.jpg" /></span></a>
  </div>
  
  
  <div id="wall-e" class="item">
    <a href="#wall-e"><span class="case"><img src="http://s.cdpn.io/79/movie-wall-e.jpg" /></span></a>
  </div>
  
  
  <div id="fight-club" class="item">
    <a href="#fight-club"><span class="case"><img src="http://s.cdpn.io/79/movie-fightclub.jpg" /></span></a>
  </div>
  
</div>

Movie Picker.markdown

Movie Picker

Forked from simurai's Pen Movie Picker.

A Pen by Ignet on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Vollkorn:bold);

html {
  height: 100%;
  font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  background-color: #e9ebf4;
  background: url(http://s.cdpn.io/79/glow.png) no-repeat fixed center -300px,
    linear-gradient( hsl(229, 33%, 94%), hsla(229, 33%, 94%, 0) ) fixed center top,
    url(http://s.cdpn.io/79/light-noise.gif) repeat fixed 0 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}


#wrapper {
  padding: 10% 0 15% 0;
}


/* ----------- start
here it gets more interesting */


.item {
  position: relative;
  display: inline-block;
  perspective: 200;
}

.item .stars {
  
  position: absolute;
  text-align: center;
  color: transparent;
  z-index: -1;
  bottom: 0px;
  -webkit-user-select: none;
}

.stars .star {
  font-size: .3em;
}

/* 3D positioning */

.item:nth-child(1) a { transform: translateZ(-50px) rotateY(20deg); -webkit-filter: grayscale(1) blur(1px); }
.item:nth-child(2) a { transform: translateZ(-120px) rotateY(10deg); -webkit-filter: grayscale(1) blur(2px); }
.item:nth-child(3) a { transform: translateZ(-150px) rotateY(0deg); -webkit-filter: grayscale(1) blur(3px); }
.item:nth-child(4) a { transform: translateZ(-120px) rotateY(-10deg); -webkit-filter: grayscale(1) blur(2px); }
.item:nth-child(5) a { transform: translateZ(-50px) rotateY(-20deg); -webkit-filter: grayscale(1) blur(1px); }

.item:nth-child(1) a img { padding-left: 10px; }
.item:nth-child(2) a img { padding-left: 6px; margin: 0 2px; }
.item:nth-child(3) a img { padding: 0px; margin: 0 5px; }
.item:nth-child(4) a img { padding-right: 6px; margin: 0 2px; }
.item:nth-child(5) a img { padding-right: 10px; }


.item a {
  display: inline-block;
  box-reflect: below 0px linear-gradient( hsla(0,0%,100%,0), hsla(0,0%,100%,0) 60%, hsla(0,0%,100%,.15) );
  transition: transform .5s cubic-bezier(.24, .16, .12, 1); 
  transition: transform .5s cubic-bezier(.24, .16, .12, 1), 
    -webkit-filter .5s cubic-bezier(.24, .16, .12, 1);
}

/* DVD case */

.item a .case {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .5s cubic-bezier(.27, .06, .17, .99);	
}
.item a .case:before {
  content: "";
  position: absolute; 
  width: 95%;
  height: 100%;
  top: 0;
  z-index: 1;
  
  border-radius: 8px / 3px;
  box-shadow: inset 0 0 2px hsla(0,0%,100%,1), inset 0 0 20px hsla(0,0%,100%,.3);
  background-image: linear-gradient( 135deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,0),
    hsla(0,0%,100%,.25) 50%, hsla(0,0%,100%,0) 50% );
}

.item:nth-child(1) .case:before { left: 5.5%; }
.item:nth-child(2) .case:before { left: 4.5%; }
.item:nth-child(3) .case:before { left: 3%; }
.item:nth-child(4) .case:before { left: 1.5%; }
.item:nth-child(5) .case:before { left: 0%; }


/* cover image */

.item img { 
  display: block;
  background-color: #222;
  border-radius: 12px / 6px;
  background-image: linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0) );
}




/* ----------- hover */
.item a:hover { 
  cursor: crosshair;
}
.item a:hover .case {
  transform: translateY(-20px);
  transition: transform .1s cubic-bezier(.27, .06, .17, .99);
}


/* ----------- active */
.item a:active .case {
  transform: translateY(-20px) scale(.9);
  transition: transform .1s ease-out;
}



/* ----------- :target 
Here all the styles that get applied after a movie gets clicked*/


.item:target a {
  position: relative;
  z-index: 1;
  transform: translateZ(0px);
  -webkit-filter: grayscale(0) blur(0);
  transition: transform .2s cubic-bezier(.24, .16, .12, 1), -webkit-filter .2s ease-out;
}
.item:target a img {
  margin: 0 5px;
  padding: 0;
  border-radius: 6px / 4px;
}

.item:target a .case:before {
  width: 93.5%;
  height: 99.5%;
  left: 6px;
  top: 1px;
}

/* hover */
.item:target a:hover{ cursor: default; }
.item:target a:hover .case { transform: none;}