"card"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/khadkamhn/pen/WQaRaw?limit=all&page=6&q=social" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <style class="cp-pen-styles">body{ margin:0; color:#444; background:#444; font:300 16px/18px Roboto, sans-serif; } *,:after,:before{box-sizing:border-box} .pull-left{float:left} .pull-right{float:right} .clearfix:after,.clearfix:before{content:'';display:table} .clearfix:after{clear:both;display:block} .toggle{ display:none; } .social-share-wrap{ width:300px; overflow:hidden; background:#fff; margin:10% auto 0; min-height:370px; border-radius:8px; position:relative; box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22); } .social-share-wrap .cover{ width:100%; height:152px; background:#5DBCD2; opacity:1; -webkit-transform:translateY(0); transform:translateY(0); -webkit-transition:all .6s ease-in-out .4s; transition:all .6s ease-in-out .4s; } .social-share-wrap .cover .image{ width:100%; opacity:.8; } .social-share-wrap .content{ padding:15px; position:relative; } .social-share-wrap .content .title, .social-share-wrap .content .text, .social-share-wrap .content .price{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0); -webkit-transition:all .6s ease-in-out .4s; transition:all .6s ease-in-out .4s; } .social-share-wrap .content .label{ top:-15px; right:15px; width:40px; height:40px; color:#eee; cursor:pointer; font-size:18px; line-height:40px; text-align:center; border-radius:50%; position:absolute; font-weight:normal; background:#34a3be; -webkit-transform:scale(1); transform:scale(1); -webkit-transition:all .3s ease-in-out .6s; transition:all .3s ease-in-out .6s; } .social-share-wrap .content .title{ margin-bottom:15px; text-transform:uppercase; -webkit-transition-duration:.4s; transition-duration:.4s; } .social-share-wrap .content .text{ display:block; line-height:24px; -webkit-transition-duration:.6s; transition-duration:.6s; } .social-share-wrap .content .price{ font-size:36px; font-weight:500; line-height:36px; margin:30px 0 15px; -webkit-transition-duration:.8s; transition-duration:.8s; } .social-share-wrap .content .buy{ right:15px; bottom:30px; padding:8px; color:inherit; font-weight:400; font-size:18px; position:absolute; text-decoration:none; text-transform:uppercase; -webkit-transition:all .2s ease-in-out 0s; transition:all .2s ease-in-out 0s; } .social-share-wrap .content .buy:hover{ background:#ddd; } .social-share-wrap .social-share-overlay{ top:0; left:0; right:0; bottom:0; padding:15px; position:absolute; -webkit-transform:scale(0); transform:scale(0); -webkit-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; } .social-share-wrap .social-share-overlay:before{ top:50%; left:50%; content:''; width:30em; height:30em; margin-top:-15em; border-radius:50%; margin-left:-15em; position:absolute; background:#77bef7; -webkit-transform:inherit; transform:inherit; -webkit-transition:inherit; transition:inherit; } .social-share-wrap .social-share-overlay .close{ top:0; right:0; color:#eee; width:40px; height:40px; cursor:pointer; font-size:28px; font-weight:400; line-height:40px; text-align:center; position:absolute; } .social-share-wrap .social-share-overlay .social-share-links{ position:relative; } .social-share-wrap .social-share-overlay .social-share-links a{ opacity:0; color:#eee; margin:auto; max-width:75%; display:block; font-size:18px; margin-top:30px; line-height:24px; margin-bottom:30px; padding:10px 15px; border:2px solid; border-radius:25px; text-decoration:none; -webkit-transition:all .4s ease-in-out 0s; transition:all .4s ease-in-out 0s; -webkit-transition-delay:.5s; transition-delay:.5s; } .social-share-wrap .social-share-overlay .social-share-links a:nth-child(1){ -webkit-transform:translateY(2em); transform:translateY(2em); -webkit-transition-duration:.4s; transition-duration:.4s; } .social-share-wrap .social-share-overlay .social-share-links a:nth-child(2){ -webkit-transform:translateY(3em); transform:translateY(3em); -webkit-transition-duration:.6s; transition-duration:.6s; } .social-share-wrap .social-share-overlay .social-share-links a:nth-child(3){ -webkit-transform:translateY(4em); transform:translateY(4em); -webkit-transition-duration:.8s; transition-duration:.8s; } .social-share-wrap .social-share-overlay .social-share-links .fa{ min-width:30px; font-size:24px; } .toggle:checked + .social-share-wrap .social-share-overlay{ -webkit-transform:scale(1); transform:scale(1); } .toggle:checked + .social-share-wrap .cover{ opacity:0; -webkit-transform:translateY(-100%); transform:translateY(-100%); } .toggle:checked + .social-share-wrap .content .title, .toggle:checked + .social-share-wrap .content .text, .toggle:checked + .social-share-wrap .content .price{ opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); } .toggle:checked + .social-share-wrap .content .label{ -webkit-transform:scale(0); transform:scale(0); } .toggle:checked + .social-share-wrap .social-share-overlay a{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }</style></head><body> <input class="toggle" id="toggle" type="checkbox"> <div class="social-share-wrap"> <div class="cover"> <img class="image" src="https://4d5f7a333917cc5d02852a128da9e34c7a2ca424.googledrive.com/host/0Bx6oatWuAelsZTRfXzRVSG5EZnc/codecanyon/mk_flat_price_table.gif"> </div> <div class="content"> <label class="label" for="toggle"><i class="fa fa-share-alt"></i></label> <div class="title"><b>MK Flat Price Table</b></div> <div class="text">A modern design price tables that is fully responsive and compatible with font-awesome and bootstrap.</div> <div class="price">$5.00</div> <a class="buy" target="_blank" href="http://codecanyon.net/item/mk-flat-pricing-table/13404608?ref=khadkamhn"><i class="fa fa-shopping-cart"></i> Buy</a> </div> <div class="social-share-overlay"> <label class="close" for="toggle">×</label> <div class="social-share-links"> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?display=popup&u=http%3A%2F%2Fcodecanyon.net%2Fitem%2Fmk-flat-pricing-table%2F13404608%3Fref%3Dkhadkamhn"><i class="fa fa-facebook"></i> Facebook</a> <a target="_blank" href="https://twitter.com/intent/tweet?text=Check+out+%27MK+Flat+Pricing+Table%27+on+%23EnvatoMarket+by+%40khadkamhn+%23codecanyon&url=http%3A%2F%2Fcodecanyon.net%2Fitem%2Fmk-flat-pricing-table%2F13404608%3Fref%3Dkhadkamhn"><i class="fa fa-twitter"></i> Twitter</a> <a target="_blank" href="https://pinterest.com/pin/create/button?description=MK+Flat+Pricing+Table&media=http%3A%2F%2F0.s3.envato.com%2Ffiles%2F156087519%2Fmk_flat_price_table.png&url=http%3A%2F%2Fcodecanyon.net%2Fitem%2Fmk-flat-pricing-table%2F13404608%3Fref%3Dkhadkamhn"><i class="fa fa-pinterest"></i> Pinterest</a> </div> </div> </div> </body></html>

Related: See More

Paper Dashboard Angular
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: