"Card 3"
Bootstrap 3.0.0 Snippet by vitasarts

<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 ----------> <figure class="snip1492"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample85.jpg" alt="sample85" /> <figcaption> <h3>Pudol Doux</h3> <p>All this modern technology just makes people try to do everything at once.</p> <div class="price"> <s>$24.00</s>$19.00 </div> </figcaption><i class="ion-plus-round"></i> <a href="#"></a> </figure> <figure class="snip1492 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample60.jpg" alt="sample60" /> <figcaption> <h3>Kurie Secco</h3> <p>To make a bad day worse, spend it wishing for the impossible.</p> <div class="price"> <s>$29.00</s>$39.00 </div> </figcaption><i class="ion-plus-round"></i> <a href="#"></a> </figure> <figure class="snip1492"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample74.jpg" alt="sample74" /> <figcaption> <h3>Zosaisan Invec</h3> <p>Why should I have to work for everything? It's like saying that I don't deserve it.</p> <div class="price"> <s>$35.00</s>$45.00 </div> </figcaption><i class="ion-plus-round"></i> <a href="#"></a> </figure>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://fonts.googleapis.com/css?family=Oswald:300,400); .snip1492 { font-family: 'Oswald', Arial, sans-serif; position: relative; float: left; margin: 10px 1%; min-width: 230px; max-width: 315px; width: 100%; background: #ffffff; text-align: center; color: #000000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-size: 16px; } .snip1492 * { -webkit-box-sizing: border-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .snip1492 img { max-width: 100%; vertical-align: top; position: relative; background-color: #666666; padding-top: 40px; } .snip1492 figcaption { padding: 20px; } .snip1492 h3, .snip1492 p { margin: 0; } .snip1492 h3 { font-size: 1.3em; font-weight: 400; margin-bottom: 5px; text-transform: uppercase; } .snip1492 p { font-size: 0.9em; letter-spacing: 1px; font-weight: 300; } .snip1492 .price { font-weight: 500; font-size: 1.4em; line-height: 48px; letter-spacing: 1px; } .snip1492 .price s { margin-right: 5px; opacity: 0.5; font-size: 0.9em; } .snip1492 i { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); width: 56px; line-height: 56px; text-align: center; border-radius: 50%; background-color: #666666; color: #ffffff; font-size: 36px; } .snip1492 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .snip1492:hover i, .snip1492.hover i, .snip1492:hover img, .snip1492.hover img { background-color: #2980b9; } .snip1492:hover i, .snip1492.hover i { -webkit-transform: translate(-50%, 5px); transform: translate(-50%, 5px); } /* Demo purposes only */ body { background-color: #212121; }

Related: See More


Questions / Comments: