"card grid"
Bootstrap 3.0.0 Snippet by evarevirus

<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 lang='en' 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/elmahdim/pen/pIqlh?depth=everything&order=popularity&page=19&q=product&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">* { margin: 0; padding: 0; } body { font: 14px/18px'OpenSans-Bold', sans-serif; } ul { list-style: none; } .wrapper { width: 700px; margin: 20px auto; } /* products */ .products { margin: 40px 0; overflow: hidden; border-left: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } .products ul li p { display: none; } .products ul.list li p { display: block; } .products .list li { float: none; display: block; width: 691px; height: 245px; } .products .list li .titlePro { float: left; position: relative; padding: 45px 0 20px 0; width: auto; height: auto; border: 0; background: transparent; } .products .list li:hover .titlePro { border: 0; } .products .list li .titlePro a { padding: 0 0 5px 0; } .products .list li .titlePro .descTitle { color: #333; text-transform: none !important; padding: 10px 0 0 0; } .products .list li .titlePro p { color: #333; text-transform: none !important; width: 440px; } .products .list li .wrapimg { height: 243px; float: left; border-right: 1px solid #d9d9d9; margin: 0 13px 0 0; width: 230px; position: relative; } .products .list li .wrapimg img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } .products .list li .addPro { height: 243px; border-bottom: 1px solid rgba(51, 51, 51, 1); } .products .list li .addPro a { margin: 45% auto auto 40px; } .products.catalog { margin: 80px auto 40px auto; } .products.category { margin: 10px 0; width: 693px; float: left; } .products ul li { float: left; margin: 0; padding: 0; width: 230px; height: 244px; position: relative; border-top: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; } .products ul li img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } .products ul li:hover .addPro, .products ul li:hover .addPro a { opacity: 1; } .products ul li:hover .titlePro { border: 1px solid rgba(51, 51, 51, 1); border-top: 0; } .products ul li:hover .titlePro a { color: #010101; } .addPro { position: absolute; top: 0; left: 0; width: 228px; height: 186px; border: 1px solid rgba(51, 51, 51, 1); border-bottom: 0; background: rgba(255, 255, 255, 0.5); opacity: 0; -webkit-transition: opacity 0s; -moz-transition: opacity 0s; -o-transition: opacity 0s; } .addPro a { text-decoration: none; display: inline-block; width: 157px; height: 40px; margin: 100px auto auto 40px; background-color: #333; text-align: center; font: 14px/40px'OpenSans-Italic', sans-serif; color: #fff; opacity: 0; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; } .titlePro { position: absolute; bottom: 0; left: 0; width: 208px; height: 36px; border: 1px solid rgba(51, 51, 51, 0); -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; border-top: 0; padding: 10px; background: rgba(255, 255, 255, 0.5); } .titlePro p, .titlePro span, .titlePro a { text-transform: uppercase; } .titlePro a { color: #003f75; text-decoration: none; display: block; } .titlePro span { color: #a20000; } .view p { top: 5px; margin: 0 10px 0 0; } .view p, .view a { float: left; display: inline-block; text-decoration: none; position: relative; } .icon-grid { background: url("http://cdn1.iconfinder.com/data/icons/jigsoar-icons/16/_thumbnail.png") no-repeat 0 0; height: 16px; width: 16px; top: 7px; } .icon-list { background: url("http://cdn3.iconfinder.com/data/icons/other-icons/48/list-32.png") no-repeat 0 0; height: 32px; width: 32px; } </style></head><body> <div class="wrapper"> <div class="view"> <p>View as:</p> <a href="#" class="icon-grid"></a> <a href="#" class="icon-list"></a> </div> <div class="products category"> <ul class=""> <li> <div class="wrapimg"> <img src="https://www.comparison.com.au/system/image_library/22181/Samsung_EC-ST500.jpg"> <div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a> </div> </div> <div class="titlePro"> <a href="javascript:;">Samsung EC ST500</a> <span>$ 145.00</span> <p class="descTitle">Detailed item information</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </li> <li> <div class="wrapimg"> <img src="https://www.cameras.co.uk/pictures/Sony-DSC-T7.jpg"> <div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a> </div> </div> <div class="titlePro"> <a href="javascript:;">Sony DSC-T7</a> <span>$ 200.00</span> <p class="descTitle">Detailed item information</p> <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </li> <li> <div class="wrapimg"> <img src="https://www.clubdeamigos.com.ar/contenido/18_3_2013_6604668/bjc176jpkli323_2240153_thumb.jpg"> <div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a> </div> </div> <div class="titlePro"> <a href="javascript:;">NOTICIAS - Vida Android</a> <span>$ 150.00</span> <p class="descTitle">Detailed item information</p> <p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </li> <li> <div class="wrapimg"> <img src="https://www.clubdeamigos.com.ar/contenido/18_3_2013_6604668/bjc176jpkli323_2240153_thumb.jpg"> <div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a> </div> </div> <div class="titlePro"> <a href="javascript:;">NOTICIAS - Vida Android</a> <span>$ 150.00</span> <p class="descTitle">Detailed item information</p> <p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </li> <li> <div class="wrapimg"> <img src="https://www.comparison.com.au/system/image_library/22181/Samsung_EC-ST500.jpg"> <div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a> </div> </div> <div class="titlePro"> <a href="javascript:;">Samsung EC ST500</a> <span>$ 145.00</span> <p class="descTitle">Detailed item information</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </li> <li> <div class="wrapimg"> <img src="https://www.cameras.co.uk/pictures/Sony-DSC-T7.jpg"> <div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a> </div> </div> <div class="titlePro"> <a href="javascript:;">Sony DSC-T7</a> <span>$ 200.00</span> <p class="descTitle">Detailed item information</p> <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </li> </ul> </div> </div> <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 >/* @ElmahdiMahmoud May 19, 2013 */ $(".view a").on('click', function(){ $('.products ul').toggleClass('list'); return false; }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: