"Material Cards"
Bootstrap 3.3.0 Snippet by threeel

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <!-- Card Projects --> <div class="col-md-4 col-sm-6"> <div class='report-module'> <div class='thumbnail'> <a href="#"><img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg'></a> </div> <div class='post-content'> <div class='category'>United States</div> <h1 class='title'>FIS Consumer Banking PACE Index</h1> <p class='description'>The FIS Consumer Banking PACE Index™ indicated that two-thirds of banked consumers in the United States beieve their primary banking providers are not meeting expectations across a range of factors essential to building relevance and trust.</p> <div class='post-meta'> <span class='timestamp'> <a class="btn btn-link" href='#'>Access Report</a> </span> <span class='comments'> <a class="btn btn-primary" href='#'>View Infographic</a> </span> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class='report-module'> <div class='thumbnail'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg'> </div> <div class='post-content'> <div class='category'>United Kingdom</div> <h1 class='title'>FIS Consumer Banking PACE Index</h1> <p class='description'>The FIS Consumer Banking PACE Index™ indicated that two-thirds of banked consumers in the United States beieve their primary banking providers are not meeting expectations across a range of factors essential to building relevance and trust.</p> <div class='post-meta'> <div class="row"> <span class='timestamp'> <a class="btn btn-link" href='#'>Access Report</a> </span> <span class='comments'> <a class="btn btn-primary" href='#'>View Infographic</a> </span> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class='report-module'> <div class='thumbnail'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg'> </div> <div class='post-content'> <div class='category'>Canada</div> <h1 class='title'>FIS Consumer Banking PACE Index</h1> <p class='description'>The FIS Consumer Banking PACE Index™ indicated that two-thirds of banked consumers in the United States beieve their primary banking providers are not meeting expectations across a range of factors essential to building relevance and trust.</p> <div class='post-meta'> <span class='timestamp'> <a class="btn btn-link" href='#'>Access Report</a> </span> <span class='comments'> <a class="btn btn-primary" href='#'>View Infographic</a> </span> </div> </div> </div> </div> </div> </div>
.report-module { position: relative; margin: 30px 0; z-index: 1; display: block; background: #ffffff; min-width: 270px; width: 300px\9; height: auto; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .report-module .thumbnail { background: #009775; height: 500px; overflow: hidden; } .thumbnail { padding: 0; } .report-module:hover { -webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); } .report-module:hover .thumbnail img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); opacity: .9; } .report-module .thumbnail img { display: block; width: 120%; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; opacity: .2; } .report-module .post-content { position: absolute; bottom: 0; background: #ffffff; width: 100%; padding: 20px; -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; } .report-module .post-content .category { position: absolute; top: -34px; left: 0; background: #333; padding: 10px 15px; color: #ffffff; font-size: 14px; font-weight: 600; text-transform: uppercase; } .report-module .post-content .title { margin: 0; padding: 0 0 10px; color: #333333; font-size: 26px; font-weight: 700; } .report-module .post-content .description { display:block; color: #666666; font-size: 14px; line-height: 1.8em; } .report-module .post-content .post-meta { margin: 30px 0 0; color: #999999; } .report-module .post-content .post-meta .timestamp { margin: 0 16px 0 0; } .btn-primary { color: #fff; text-decoration: none; }

Related: See More


Questions / Comments: