HTML:

Source Code : 
<body>
    
    
    <
div id="wrapper">
    
        <
div id="amelie" class="item">
            <
h3 class="stars" title="Amelie">8<span class="star">&#9733;</span>6</h3>
            
<a href="#amelie"><span class="case"><img src="http://lab.simurai.com/stars/movies/amelie.jpg" /></span></a>
        </
div>
        
        <
div id="bruno" class="item">
            <
h3 class="stars" title="BR&Uuml;NO">6<span class="star">&#9733;</span>3</h3>
            
<a href="#bruno"><span class="case"><img src="http://lab.simurai.com/stars/movies/goats.jpg" /></span></a>
        </
div>
        
        <
div id="american-beauty" class="item">
            <
h3 class="stars" title="American Beauty">8<span class="star">&#9733;</span>6</h3>
            
<a href="#american-beauty"><span class="case"><img src="http://lab.simurai.com/stars/movies/americanbeauty.jpg" /></span></a>
        </
div>
        
        
        <
div id="wall-e" class="item">
            <
h3 class="stars" title="WALL·E">8<span class="star">&#9733;</span>5</h3>
            
<a href="#wall-e"><span class="case"><img src="http://lab.simurai.com/stars/movies/wall-e.jpg" /></span></a>
        </
div>    
            
        
        <
div id="fight-club" class="item">
            <
h3 class="stars" title="Fight Club">8<span class="star">&#9733;</span>8</h3>
            
<a href="#fight-club"><span class="case"><img src="http://lab.simurai.com/stars/movies/fightclub.jpg" /></span></a>
        </
div>    

    </
div>&#8203; 
CSS:

Source Code : 
/* Filters by @simurai  */

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

html {
    
height100%;
    
font62.5%/"Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    
    
background-color:     #e9ebf4;    
    
background:         url(bg_glow.pngno-repeat fixed center -300px,
                        
url(bg_top.pngrepeat-x fixed center top,
                        
url(bg.pngrepeat fixed 0 0;
}

body {
    
margin0;
    
width100%;
    
height100%;
    
text-aligncenter;
    
    
//display: -webkit-box;
    
display:    -moz-box;
    
display:     -ms-box;
    
display:      -o-box;
    
display:         box;
    
    
//-webkit-box-align: center;
       
-moz-box-aligncenter;
        -
ms-box-aligncenter;
         -
o-box-aligncenter;
            
box-aligncenter;
    
    
//-webkit-box-pack: center;
       
-moz-box-packcenter;
        -
ms-box-packcenter;
         -
o-box-packcenter;
            
box-packcenter;
}


#wrapper {
    
padding100 150;
}


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


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

/* 3D positioning */

.item:nth-child(1{ -webkit-transformtranslateZ(-50pxrotateY(20deg);        -webkit-filtergrayscale(1blur(1px); }
.
item:nth-child(2{ -webkit-transformtranslateZ(-120pxrotateY(10deg);    -webkit-filtergrayscale(1blur(2px); }
.
item:nth-child(3{ -webkit-transformtranslateZ(-150pxrotateY(0deg);        -webkit-filtergrayscale(1blur(3px); }
.
item:nth-child(4{ -webkit-transformtranslateZ(-120pxrotateY(-10deg);    -webkit-filtergrayscale(1blur(2px); }
.
item:nth-child(5{ -webkit-transformtranslateZ(-50pxrotateY(-20deg);    -webkit-filtergrayscale(1blur(1px); }

.
item:nth-child(1a img padding-left10px;     }
.
item:nth-child(2a img padding-left6px;     margin0 2px;     }
.
item:nth-child(3a img padding0px;         margin0 5px;    }
.
item:nth-child(4a img padding-right6px;     margin0 2px;    }
.
item:nth-child(5a img padding-right10px;     }


.
item a {
    
displayinline-block;
    -
webkit-box-reflect:     below 0px -webkit-gradient(linearleft topleft bottom
                            
from(transparent), color-stop(0.6transparent), torgba(255,255,255,0.15) ));
    
    -
webkit-transition:     -webkit-transform .5s cubic-bezier(.24.16.121); 
    -
webkit-transition:     -webkit-transform .5s cubic-bezier(.24.16.121), 
                            -
webkit-filter .5s cubic-bezier(.24.16.121);
}

/* DVD case */

.item a .case {
    
position:     relative;
    
display:     block;
    
width:         100%;
    
height:     100%;
    -
webkit-transition: -webkit-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;
    -
webkit-box-shadowinset #fff 0 0 2px, inset rgba(255,255,255,.3) 0 0 20px;
    
    
background-image:         -webkit-gradient(linearleft topright bottomfromrgba(255,255,255,.1) ), torgba(255,255,255,0) ),
                            
color-stop(.5rgba(255,255,255,.25)), color-stop(.51rgba(255,255,255,0)) );
                            
}

.
item:nth-child(1) .case:before left5.5%; }
.
item:nth-child(2) .case:before left4.5%; }
.
item:nth-child(3) .case:before left3%; }
.
item:nth-child(4) .case:before left1.5%; }
.
item:nth-child(5) .case:before left0%; }


/* cover image */

.item img 
    
display:             block;
    
background-color:     #222;
    
border-radius:         12px 6px;    
    
background-image: -webkit-gradient(linearleft topleft bottomfromrgba(255,255,255,.5)), torgba(255,255,255,0)) );

[Login or [Only Registered and Activated users can see Content.
Click Here To Register..
]
to remove this advertisement]

}




/* ----------- hover */
.item a:hover 
    
cursorcrosshair;
}
.
item a:hover .case {
    -
webkit-transformtranslateY(-20px);
    -
webkit-transition: -webkit-transform .1s cubic-bezier(.27.06.17.99);
}


/* ----------- active */
.item a:active .case {
    -
webkit-transformtranslateY(-20pxscale(.9);
    -
webkit-transition: -webkit-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;
    -
webkit-transform:     translateZ(0px);
    -
webkit-filtergrayscale(0blur(0);
    -
webkit-transition: -webkit-transform .2s cubic-bezier(.24.16.121), -webkit-filter .2s ease-out;
}
.
item:target a img {
    
margin:     0 5px;
    
padding:     0;
    
border-radius6px 4px;
}

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

/* hover */
.item:target a:hovercursor: default; }
.
item:target a:hover .case { -webkit-transformnone;}



.
item:target:nth-child(1) .stars { -webkit-transformtranslateX(60pxtranslateY(150px); }
.
item:target:nth-child(2) .stars { -webkit-transformtranslateX(40pxtranslateY(150px); }
.
item:target:nth-child(3) .stars { -webkit-transformtranslateY(150px); }
.
item:target:nth-child(4) .stars { -webkit-transformtranslateX(-40pxtranslateY(150px); }
.
item:target:nth-child(5) .stars { -webkit-transformtranslateX(-60pxtranslateY(150px); }
&
#8203; 

Compile Ur HTML , CSS , JAVASCRIPT code online

[Only Registered and Activated users can see Content.
Click Here To Register..
]
Mobile_Guru Reviewed by Mobile_Guru on . Film Album rating HTML: <body> <div id="wrapper"> <div id="amelie" class="item"> <h3 class="stars" title="Amelie">8<span class="star">★</span>6</h3> <a href="#amelie"><span class="case"><img src="http://lab.simurai.com/stars/movies/amelie.jpg" /></span></a> Rating: 5