"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 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/joshhowenstine/pen/yLqgb?depth=everything&order=popularity&page=8&q=thumbnail&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">/* Thanks to dmac37 for this hex technique */ @import url(https://fonts.googleapis.com/css?family=Lato:300); /* Variables */ h1 { font-family: 'Lato', sans-serif; font-size: 4em; font-weight: 300; text-align: center; margin: 100px 10px 0 10px; } body { background: #fff; } section { margin: 0 auto; text-align: center; width: 960px; } .hex_row_even { display: inline-block; margin: 0 auto -275px auto; overflow: hidden; } .hex_row_odd { display: inline-block; margin: 0 auto -275px auto; overflow: hidden; } .center { float: left; margin: 20px 10px; width: 220px; } .hexagon { -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg); cursor: pointer; height: 440px; overflow: hidden; visibility: hidden; width: 220px; } .hex1 { -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg); height: 100%; overflow: hidden; width: 100%; } .hex2 { -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg); height: 100%; position: relative; visibility: visible; width: 100%; } .desc { color: white; font-family: 'Lato', sans-serif; font-size: 1.5em; font-weight: 300; height: 440px; line-height: 1.5em; position: absolute; text-align: center; text-transform: uppercase; visibility: visible; width: 220px; } .desc.base { background: rgba(230, 0, 98, 0.75); } .desc.one { background: rgba(252, 171, 55, 0.75); } .desc.two { background: rgba(169, 160, 50, 0.75); } .desc.three { background: rgba(83, 70, 54, 0.75); } .desc h2 { margin: 165px 20px 0 20px; } .desc p { font-size: .5em; text-transform: lowercase; } </style></head><body> <h1>HONEYCOMB</h1> <section> <div class="hex_row_odd"> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('http://www.sub5zero.com/wp-content/uploads/2016/08/surfing-1050x525.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('https://25.media.tumblr.com/tumblr_mb3lh6abw91rg4gq5o1_500.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('http://www.visitmexico.com/work/models/VisitMexico30/WebPage/Ensenada_la_cuna_del_surf/photoEscudo_Ensenada_la_cuna_del_surf_surfensenadaheader.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> </div><!--/hex_row_even--> <div class="hex_row_even"> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('https://static.tumblr.com/6pl87f7/eVqmduuh2/22948aee82dd11e18cf91231380fd29b_7.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('http://www.rawstory.com/wp-content/uploads/2015/05/A-man-surfing-Shutterstock-800x430.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('https://img.grouponcdn.com/deal/pZW1AwwkaLpzZ16v6Sv1/kM-2048x1229/v1/c700x420.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('http://www.destination360.com/europe/portugal/images/s/portugal-surf.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> </div><!--/hex_row_even--> <div class="hex_row_odd"> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('http://cdn1.theinertia.com/wp-content/uploads/2012/07/11.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('http://www.sanclementeguide.com/img/surfing-san-clemente.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> <div class="center"> <div class="hexagon"> <div class="hex1"> <div class="hex2" style="background: url('https://upload.wikimedia.org/wikipedia/commons/c/c2/1999_-_Surf_%C3%A0_Waikiki_Beach_Honolulu_Hawa%C3%AF.jpg') center no-repeat"> <div class="desc"> <h2>Welcome this is an epic title</h2> <p>website</p> </div> </div><!--/hex2--> </div><!--/hex1--> </div><!--/hexagon--> </div><!--/center--> </div><!--/hex_row_even--> </section> <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 >$(document).ready(function() { var color = 'one'; var counter = 0; $('.desc').hide(); $('.hexagon').hover( function() { $(this).find('.desc').fadeIn('fast'); counter++; if (counter === 0) { color = 'base'; } else if (counter === 1) { color = 'one'; } else if (counter === 2) { color = 'two'; } else if (counter === 3) { color = 'three'; } else if (counter >= 4){ counter = 0 ; color = 'base'; } $(this).find('.desc').addClass(color); }, function() { $(this).find('.desc').fadeOut('fast', function() { $(this).removeClass(color); }); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Gaia Bootstrap Template Pro
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: