"card"
Bootstrap 3.0.0 Snippet by evarevirus

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

Related: See More


Questions / Comments: