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;}
