<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="#" class="list-header-image">
<img src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/pcD1n9FnSkSzzlyH4frMlVzaI8I.jpg">
</a>
</div>
<div class="list-content">
<h2><a href="#" class="text-black">3%</a></h2>
<span class="list-meta">
<span class="list-meta-item"><i class="fa fa-clock-o"></i> 2016</span>
<a href="#" class="list-meta-item"><i class="fa fa-star"></i> 9.33</a>
</span>
<p>A thriller set in a world sharply divided between progress and devastation, where people are given the chance to make it to the "better side" but only 3% of the candidates succeed.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="#" class="list-header-image">
<img src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/A3GEp5IM1JXD0TuicN58XYkYV1b.jpg">
</a>
</div>
<div class="list-content">
<h2><a href="#" class="text-black">Lethal Weapon</a></h2>
<span class="list-meta">
<span class="list-meta-item"><i class="fa fa-clock-o"></i> 2016</span>
<a href="#" class="list-meta-item"><i class="fa fa-star"></i> 7.26</a>
</span>
<p>A slightly unhinged former Navy SEAL lands a job as a police officer in Los Angeles where he's partnered with a veteran detective trying to keep maintain a low stress level in his life.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="#" class="list-header-image">
<img src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/esKFbCWAGyUUNshT5HE5BIpvbcL.jpg">
</a>
</div>
<div class="list-content">
<h2><a href="#" class="text-black">Stranger Things</a></h2>
<span class="list-meta">
<span class="list-meta-item"><i class="fa fa-clock-o"></i> 2016</span>
<a href="#" class="list-meta-item"><i class="fa fa-star"></i> 7.74</a>
</span>
<p>When a young boy vanishes, a small town uncovers a mystery involving secret experiments, terrifying supernatural forces, and one strange little girl.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="#" class="list-header-image">
<img src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/fkj2HgV3cfRBqJjSSwS7zJVyuXD.jpg">
</a>
</div>
<div class="list-content">
<h2><a href="#" class="text-black">Pure Genius</a></h2>
<span class="list-meta">
<span class="list-meta-item"><i class="fa fa-clock-o"></i> 2016</span>
<a href="#" class="list-meta-item"><i class="fa fa-star"></i> 6.42</a>
</span>
<p>A young Silicon Valley tech-titan enlists a veteran surgeon with a controversial past in starting a hospital with a cutting-edge, new school approach to medicine.</p>
</div>
</div>
</div>
</div>
</div>
body {
font-family: 'Open Sans', sans-serif;
padding-top: 10px;
background-color: #f3f5f6;
}
a:focus, a:hover, a:active {
text-decoration: none;
}
.text-black {
color: #333 !important;
}
a.text-black:focus, a.text-black:hover {
color: #7b7b7b !important;
}
.list {
display: block;
background-color: rgba(255,255,255,.8);
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
border-radius: 2px;
transition: all .2s ease-in-out;
}
.list-header {
display: block;
float: left;
width: 35%;
overflow: hidden;
position: relative;
border-radius: 2px 0 0 2px;
}
.list-header img {
width: 100%;
}
.list-header .list-header-image:after {
display: block;
content: '';
background-color: rgba(0,0,0,.4);
position: absolute;
top: 100%;
left: 100%;
width: 100px;
height: 100px;
box-shadow: 0 0 200px 100px rgba(0,0,0,.58);
z-index: 1;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0;
filter: alpha(opacity=0);
transition: all .8s;
-moz-transition: all .8s;
-webkit-transition: all .8s;
-o-transition: all .8s;
}
.list-content {
display: block;
margin-left: 35%;
padding: 15px;
position: relative;
}
.list-meta {
display: block;
margin-bottom: 16px;
font-size: 13px;
line-height: 100%;
}
.list-meta .list-meta-item {
display: inline-block;
margin-right: 18px;
color: #9A9A9A;
}
.list:after {
display: block;
clear: both;
content: '';
}
.list:hover {
box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
}
@media only screen and (max-width: 991px) {
.list-header {
display: block;
width: 100%;
padding: 0;
border-radius: 0;
}
.list-content {
display: block;
width: 100%;
margin-left: 0;
padding: 15px;
clear: both;
}
}
