Bootstrap snippet: Image Cards

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: cards,images,portfolios



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row bootstrap snippets"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="card"> <div class="thumbnail"> <img width="360" height="270" src="http://lorempixel.com/350/260/nature/5/" alt="thumbnail"> <a href="#" class="thumb-cover"></a> <div class="details"> <div class="authors-container"> <div class="author"> <a class="card-user account-photo account-product-owner"> <div class="mask"> <img class="photo" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="Thumb"> </div> </a> </div> </div> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 3,461</b> <b class="comments-icon"><i class="fa fa-comment"></i> 42</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a class="btn btn-neutral btn-round btn-fill" href="#">More Details</a> <a class="btn btn-neutral btn-round" href="#">Live Preview</a> </b> </div> <div class="card-info"> <a href="#"> <h3>Product 1 <div class="time pull-right">Free</div> </h3> <div class="circle-red"><i class="fa fa-circle-o"></i></div> <p>Smaill description</p> </a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="card"> <div class="thumbnail"> <img width="360" height="270" src="http://lorempixel.com/350/260/nature/6/" alt="thumbnail"> <a href="#" class="thumb-cover"></a> <div class="details"> <div class="authors-container"> <div class="author"> <a class="card-user account-photo account-product-owner"> <div class="mask"> <img class="photo" src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="Thumb"> </div> </a> </div> </div> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 162</b> <b class="comments-icon"><i class="fa fa-comment"></i> 23</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a class="btn btn-neutral btn-round btn-fill" href="#">More Details</a> <a class="btn btn-neutral btn-round" href="#">Live Preview</a> </b> </div> <div class="card-info"> <a href="#"> <h3>Product 2<div class="time pull-right">$19</div></h3> <div class="circle-blue"><i class="fa fa-circle-o"></i></div> <p>Small description</p> </a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="card"> <div class="thumbnail"> <img width="360" height="270" src="http://lorempixel.com/350/260/nature/2/" alt="thumbnail"> <a href="#" class="thumb-cover"></a> <div class="details"> <div class="authors-container"> <div class="author"> <a class="card-user account-photo account-product-owner"> <div class="mask"> <img class="photo" src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="Thumb"> </div> </a> </div> </div> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 621</b> <b class="comments-icon"><i class="fa fa-comment"></i> 27</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a class="btn btn-neutral btn-round btn-fill" href="#">More Details</a> <a class="btn btn-neutral btn-round" href="#">Live Preview</a> </b> </div> <div class="card-info"> <a href="#"> <h3>Product 3 <div class="time pull-right">$39</div> </h3> <div class="circle-red"><i class="fa fa-circle-o"></i></div> <p>Small description</p> </a> </div> </div> </div> </div>
body{ margin-top:20px; } .card { border-radius: 12px; position: relative; margin-bottom: 60px; } .card .thumbnail { border: 0 none; padding: 0; margin: 0; min-height: 270px; position: relative; background: transparent; } .card .thumbnail>img { border-radius: 12px 12px; box-shadow: 0 25px 20px -21px rgba(0,0,0,0.57); } .card .thumb-cover { padding: 15px 20px; height: 100%; top: 0; position: absolute; opacity: 0; display: block; width: 100%; background-color: rgba(0,0,0,0.75); z-index: 3; content: ""; left: 0; border-radius: 12px; } .card .details { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.75)), color-stop(62%, rgba(0,0,0,0.36)), color-stop(100%, rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0) 100%); top: 0; display: block; height: 60px; padding: 10px 15px 0; position: absolute; width: 100%; z-index: 1032; border-radius: 12px 12px 0 0; } .card .authors-container { display: inline-block; width: 38px; } .authors-container .author:nth-child(1) { z-index: 100; } .authors-container .author { float: left; position: relative; transition: opacity 0.25s; -webkit-transition: opacity 0.25s; } .card .author>.account-photo.account-product-owner { border-color: #ff9500; } .card .authors-container>.author>.account-photo { width: 36px; height: 36px; } .authors-container>.author>.account-photo { width: 55px; height: 55px; border-width: 2px; } .authors-container .author:nth-child(2) { z-index: 99; margin-left: -20px; } .account-photo.account-product-owner { border-color: rgba(255,149,0,0.55); } .account-photo { position: relative; width: 70px; height: 70px; display: block; margin: 0 auto; border-radius: 50%; border: 3px solid rgba(0,158,255,0.65); border-color: #ccc; } .account-photo .mask { width: 100%; height: 100%; overflow: hidden; display: block; border-radius: 50%; } .card .thumbnail img { width: 100%; } .card .numbers { color: #FFFFFF; float: right; margin-top: 6px; } .card .numbers .downloads, .card .numbers .comments-icon { margin-left: 6px; font-size: 15px; font-weight: 500; } .card:hover .thumb-cover, .card:hover .actions { opacity: 1; } .card .thumb-cover { padding: 15px 20px; height: 96%; top: 0; position: absolute; opacity: 0; display: block; width: 100%; background-color: rgba(0,0,0,0.75); z-index: 3; content: ""; left: 0; border-radius: 12px; } .card .actions { position: absolute; z-index: 3; top: 50%; text-align: center; width: 100%; height: 0; opacity: 0; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } .card-info h3 { margin-top: 10px; margin-bottom: 5px; font-size: 18px; } .card-info [class^='circle-'] { float: left; margin-right: 5px; } .card-info p { font-size: 14px; margin: 0; color: #666666; } .card-info { padding: 15px; border-radius: 0 0 12px 12px; } .card-info a:not(.btn) { color: #434343; } .circle-red i { color: #FF3B30; } .card .time { color: #777777; font-size: 15px; margin-top: 2px; text-transform: uppercase; } a, a:hover, a:focus, .btn:focus, .btn:hover, .btn:active, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus { text-decoration: none; outline: 0; outline-color: transparent; outline-style: none; } .card .actions .btn { top: 50%; position: relative; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); } .btn-neutral.btn-fill { color: #666666; background-color: white; opacity: 1; filter: alpha(opacity=100); } .btn-neutral { border-color: white; color: white; } .btn-neutral:not(.btn-fill):hover { color: white; } .btn-round { border-width: 1px; border-radius: 30px !important; opacity: 0.79; padding: 9px 18px; }
Dey-Dey

Image Cards

Dey-Dey
  Apr 10th, 21:09
2.1K Views