<!DOCTYPE html>
<html>
 
<title>movie/shows list</title>
<link rel="shortcut icon" href="">

<style>

body
{background-image: url(http://fc00.deviantart.net/fs70/f/2011/025/f/7/backgrounds2_by_hewhosavesme-d381hr1.png) !important;
background-repeat: no-repeat;
background-color: #FFFFFF !important;
background-attachment: fixed !important;
background-position: center !important;
background-size: cover !important;
width: 960px;
position: absolute;
margin-left: 150px;
}

.tent {width: 120px; 
height: 178px; 
background-color:eeeeee; 
float: left; 
margin-right: 10px;
margin-bottom: 10px; 
position: relative;
transition-duration: 0.6s; 
-moz-transition-duration: 0.6s; 
-webkit-transition-duration: 0.6s; 
-o-transition-duration: 0.6s;
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.tentseen {width: 120px; 
height: 178px; 
background-color:eeeeee; 
float: left; 
margin-right: 10px;
margin-bottom: 10px; 
position: relative;
transition-duration: 0.6s; 
-moz-transition-duration: 0.6s; 
-webkit-transition-duration: 0.6s; 
-o-transition-duration: 0.6s;
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.tent:hover .ti {opacity: 0.0;
transition-duration: 0.6s; 
-moz-transition-duration: 0.6s; 
-webkit-transition-duration: 0.6s; 
-o-transition-duration: 0.6s;
}

.tentseen:hover .ti {opacity: 0.0;
transition-duration: 0.6s; 
-moz-transition-duration: 0.6s; 
-webkit-transition-duration: 0.6s; 
-o-transition-duration: 0.6s;
}

.hhover {opacity: 0.0; 
position: absolute; 
width: 120px; 
height:178px;
padding: 0px;
left: 0px; 
color:#fff;
text-align: center;
display: table; 
transition-duration: 0.6s; 
-moz-transition-duration: 0.6s; 
-webkit-transition-duration: 0.6s; 
-o-transition-duration: 0.6s;
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.tentseen:hover .hhover {background-color: rgba(0,0,0,0.6);
opacity: 2.0;
transition-duration: 0.6s; 
-moz-transition-duration: 0.6s; 
-webkit-transition-duration: 0.6s; 
-o-transition-duration: 0.6s;
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.tent:hover .hhover {background-color: rgba(0,0,0,0.6);
opacity: 2.0;
transition-duration: 0.6s; 
-moz-transition-duration: 0.6s; 
-webkit-transition-duration: 0.6s; 
-o-transition-duration: 0.6s;
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.htent {display: table-cell; 
vertical-align: middle; 
font-size: 30px;
font-family: helvetica; 
color: #ddd;
letter-spacing:1px;
}

.hti {letter-spacing: 1px; 
width: 90%;
margin: auto; 
border-bottom: 1px solid #fff; 
margin-bottom: 4px; 
font-size: 12px; 
font-family: 'gotham medium';
padding: 4px 0px;
color: #fff; 
line-height: 110%; 
text-transform: uppercase;}

.container {width: 1200; position: center; margin: center; margin-top: 10px;}
</style>

</head>