"categories"
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/jplhomer/pen/eJobK?depth=everything&order=popularity&page=15&q=thumbnail&show_forks=false" /> <meta name="viewport" content="width=device-width" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">* { box-sizing: border-box; } .wrapper { max-width: 70em; margin: 0 auto; } nav { background: #333333; color: #ffffff; font-family: "din-condensed-web", sans-serif; text-transform: uppercase; padding: 1rem; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { color: #ffffff; text-decoration: none; } .features h3 { margin-top: 0; font-weight: 300; } .features p { margin-bottom: 0; } article { background: linear-gradient(45deg, #9e0c80, #fa602a); position: relative; } article:first-child h3 { font-size: 3em; } article:nth-child(2) { background: linear-gradient(45deg, #fa602a, #fcb400); } article:nth-child(3) { background: linear-gradient(45deg, #00e2ff, #fa602a); } article:nth-child(4) { background: linear-gradient(45deg, #9e0c80, #fcb400); } article:nth-child(5) { background: linear-gradient(45deg, #fa602a, #00e2ff); } article:nth-child(6) { background: linear-gradient(45deg, #9e0c80, #00e2ff); } article:last-child h3 { font-size: 3em; } article > a { display: block; text-decoration: none; position: relative; padding: 1rem; color: #ffffff; height: 100%; } article > a:hover .thumbnail { opacity: 0.2; } article .thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.4; background-size: cover; background-repeat: no-repeat; background-position: top; box-shadow: inset 10px -10px 25px rgba(0, 0, 0, 0.9), inset -10px 10px 25px rgba(0, 0, 0, 0.9); } article h3, article .comments, article .meta { position: relative; z-index: 1; } article h3 { font-family: "adelle", Georgia, serif; text-shadow: 1px 1px 1px #333333; font-size: 2em; line-height: 1; margin-bottom: 2rem; } article .comments { float: right; background: #95ae20; color: #333333; font-family: "din-condensed-web", sans-serif; padding: 0.25rem; } @media all and (min-width: 40em) { .features { font-size: 0px; } article { display: inline-block; width: 50%; min-height: 200px; vertical-align: top; font-size: 1rem; overflow: hidden; } article:last-child { width: 100%; } article > a { position: absolute; width: 100%; } } @media all and (min-width: 70em) { .features { position: relative; overflow: auto; margin-bottom: 2rem; } .wrapper { margin-top: 2rem; } article { display: block; float: left; min-height: 200px; width: 33.3%; } article:first-child, article:last-child { min-height: 400px; width: 33.3%; } article:nth-child(5) { clear: left; } article:last-child { position: absolute; bottom: 0; right: 0; margin-right: .1%; } } </style></head><body> <script type="text/javascript" src="//use.typekit.net/qqh1pgl.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <div class="wrapper"> <nav role='navigation'> <ul> <li><a href="#">Navigation</a></li> </ul> </nav> <div class="features"> <article> <a href="#"> <h3>This is a big story.</h3> <div href="#" class="comments">10</div> <p class="meta"> By <strong>Josh Larson</strong> </p> <div class="thumbnail" style="background-image: url(http://placepuppy.it/400/300);"></div> </a> </article> <article> <a href="#"> <h3>This is another one.</h3> <div href="#" class="comments">10</div> <p class="meta"> By <strong>Josh Larson</strong> </p> <div class="thumbnail" style="background-image: url(http://lorempixel.com/400/500);"></div> </a> </article> <article> <a href="#"> <h3>Surprise! Free money for everyone.</h3> <div class="comments">10</div> <p class="meta"> By <strong>Josh Larson</strong> </p> <div class="thumbnail" style="background-image: url(http://placekitten.com/800/400);"></div> </a> </article> <article> <a href="#"> <h3>Not really that important.</h3> <div class="comments">10</div> <p class="meta"> By <strong>Josh Larson</strong> </p> <div class="thumbnail" style="background-image: url(http://lorempixel.com/600/400);"></div> </a> </article> <article><a href="#"> <h3>We landed on the moon. Again.</h3> <div class="comments">10</div> <p class="meta"> By <strong>Josh Larson</strong> </p> <div class="thumbnail" style="background-image: url(http://lorempixel.com/400/300);"></div> </a></article> <article> <a href="#"> <h3>You won't believe what just happened.</h3> <div class="comments">10</div> <p class="meta"> By <strong>Josh Larson</strong> </p> <div class="thumbnail" style="background-image: url(http://placepuppy.it/500/600);"></div> </a> </article> <article> <a href="#"> <h3>I haven't seen my left hand in five days.</h3> <div class="comments">10</div> <p class="meta"> By <strong>Josh Larson</strong> </p> <div class="thumbnail" style="background-image: url(http://placekitten.com/400/300);"></div> </a> </article> </div> <p> This is a pure-CSS, responsive implementation of a <a href="https://theverge.com">Verge-style homepage tile layout</a>. </p> <p> At the smallest view, each article is block-level. They then split into inline-block and are given a min-height. At the largest view, they move to a floated block layout and are given widths and min-heights. The last one has to be positioned absolutely. </p> </div> </body></html>

Related: See More


Questions / Comments: