"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/hamwithglasses/pen/IJeCr?depth=everything&order=popularity&page=12&q=shop&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style class="cp-pen-styles">body { background-color: #f0f0f0; } .entry { position: relative; width: 300px; height: 200px; background: white; margin: 15px; overflow: hidden; float: left; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15); } .entry:hover img { right: 0px; top: -5px; -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } .entry:hover aside { left: -125px; transition: all 0.75s ease; opacity: 0; } .entry:hover i { left: 110px; opacity: 1; -moz-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } .entry i { border-radius: 100%; background-color: rgba(0, 0, 0, 0.4); width: 80px; height: 80px; display: block; position: absolute; left: 260px; top: 48px; text-align: center; line-height: 72px; color: white; font-family: "effra"; font-size: 100px; font-weight: bold; opacity: 0; transition: all 0.5s ease; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } .entry i:after { content: '+'; } .entry aside { width: 100px; padding: 65px 25px 30px 25px; z-index: 100; position: relative; left: 0px; transition: all 0.5s ease; } .entry strong { font-family: "effra"; text-transform: uppercase; font-weight: bold; font-size: 16px; line-height: 14px; color: #333; } .entry p { font-family: "Arial"; font-size: 13px; margin-top: 20px; color: #888; } .entry a { display: block; width: inherit; height: inherit; } .entry a:hover { cursor: pointer; } .entry a img { position: absolute; top: 0px; right: -125px; transition: all 0.5s ease; } .entry ul { position: absolute; display: block; bottom: -5px; width: inherit; } .entry li { display: inline-block; height: 5px; width: 100px; background-color: red; overflow: hidden; bottom: 0px; position: relative; bottom: 0px; } </style></head><body> <article class="entry"> <a> <aside> <strong>Quadrant Homes</strong> <p>Pacific Northwest Homebuilder</p> </aside> <img src="https://i.imgur.com/lIkWmas.png"/> <i></i> </a> <ul> <li style="background-color:#246f41"></li><li style="background-color:#f57b20"></li><li style="background-color:#433e42"></li> </ul> </article> <article class="entry"> <a> <aside> <strong>Ossia</strong> <p>Creators of Cota Wireless Energy</p> </aside> <img src="https://i.imgur.com/OzLBARg.jpg"/> <i></i> </a> <ul> <li style="background-color:#8dcf0a"></li><li style="background-color:#5a9619"></li><li style="background-color:#2c2c2c"></li> </ul> </article> <article class="entry"> <a> <aside> <strong>Clarity Signs</strong> <p>Kenmore Based Sign Shop</p> </aside> <img src="https://i.imgur.com/jUW32np.jpg"/> <i></i> </a> <ul> <li style="background-color:#d4132e"></li><li style="background-color:#282627"></li><li style="background-color:#7c7c7c"></li> </ul> </article> <article class="entry"> <a> <aside> <strong>Maddock & Associates</strong> <p>Tacoma Based Insurance Broker</p> </aside> <img src="https://i.imgur.com/Jc1nXxx.jpg"/> <i></i> </a> <ul> <li style="background-color:#0084be"></li><li style="background-color:#014c71"></li><li style="background-color:#329e00"></li> </ul> </article> <article class="entry"> <a> <aside> <strong>Smart Office Environments</strong> <p>Office Furniture</p> </aside> <img src="https://i.imgur.com/U0Mr5kU.jpg"/> <i></i> </a> <ul> <li style="background-color:#ecce00"></li><li style="background-color:#333333"></li><li style="background-color:#cccccc"></li> </ul> </article> <article class="entry"> <a> <aside> <strong>Cardiac Science</strong> <p>International Defibrillators</p> </aside> <img src="https://i.imgur.com/7tndqyT.jpg"/> <i></i> </a> <ul> <li style="background-color:#ffa43f"></li><li style="background-color:#afbc22"></li><li style="background-color:#3c8dce"></li> </ul> </article> <article class="entry"> <a> <aside> <strong>Brennan Heating</strong> <p>Seattle Heating & Air Conditioning</p> </aside> <img src="https://i.imgur.com/xz4mBfi.jpg"/> <i></i> </a> <ul> <li style="background-color:#d43254"></li><li style="background-color:#2f5fac"></li><li style="background-color:#57aeff"></li> </ul> </article> <article class="entry"> <a> <aside> <strong>Divers Institute</strong> <p>Seattle Diving School</p> </aside> <img src="https://i.imgur.com/b3uXhJH.jpg"/> <i></i> </a> <ul> <li style="background-color:#2b8dbd"></li><li style="background-color:#264c5f"></li><li style="background-color:#f36000"></li> </ul> </article> <article class="entry"> <a> <aside> <strong>Evoke Modern</strong> <p>Pacific Northwest Modern Homes</p> </aside> <img src="https://i.imgur.com/tecOxxA.jpg"/> <i></i> </a> <ul> <li style="background-color:#cecccf"></li><li style="background-color:#6581a0"></li><li style="background-color:#272425"></li> </ul> </article> <!--Typekit--> <script type="text/javascript" src="//use.typekit.net/wyr7rug.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script >$(document).ready(function(){ $('.entry').hover(function(){ var li = $('li', this); for(var i = 0; i < $(li).length; i++){if (window.CP.shouldStopExecution(1)){break;} $($(li)[i]).stop().animate({ 'height':'18px' }, 300 + (i * 150)); } window.CP.exitedLoop(1); }, function(){ $('li', this).stop().animate({ 'height':'5px' }, 250); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Now UI Kit
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: