"gallery game"
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 ----------> <div class="wrapper"> <div class="news-item hero-item"> <div class="thumbnail"> <div class="image-wrapper"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(max-width: 1000px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/divinity-small.jpg"> <source media="(min-width: 1100px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/divinity-medium.png"> <!--[if IE 9]></video><![endif]--> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/divinity-small.jpg" alt="Divinity" class="responsive-img"> </picture> </div> <div class="caption"> <span class="tag">Review</span> <h1 class="title">Divinity: Original Sin 2 is awesome</h1> <span class="author">by Ren Aysha</span> </div> </div> </div> <div class="news-item standard-item"> <div class="thumbnail"> <div class="image-wrapper"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(max-width: 599px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/re7-chris-large.jpg"> <source media="(min-width: 600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/re7-chris-small.jpg"> <!--[if IE 9]></video><![endif]--> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/re7-chris-large.jpg" alt="Resident Evil 7" class="responsive-img"> </picture> </div> <div class="caption"> <span class="tag">Featured</span> <h1 class="title">Resident Evil 7: Scarier than ever</h1> <span class="author">by Ren Aysha</span> </div> </div> </div> <div class="news-item standard-item"> <div class="thumbnail"> <div class="image-wrapper"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(max-width: 599px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/bioshock-large.jpg"> <source media="(min-width: 600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/bioshock-small.jpg"> <!--[if IE 9]></video><![endif]--> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/bioshock-large.jpg" alt="Bioshock 2" class="responsive-img"> </picture> </div> <div class="caption"> <span class="tag">Guide</span> <h1 class="title">Bioshock 2: Tactics on killing Big Sisters</h1> <span class="author">by Ren Aysha</span> </div> </div> </div> <div class="news-item standard-item"> <div class="thumbnail"> <div class="image-wrapper"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(max-width: 1000px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/lara-small.jpg"> <source media="(min-width: 1100px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/lara-medium.jpg"> <!--[if IE 9]></video><![endif]--> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/lara-small.jpg" alt="Tomb Raider" class="responsive-img"> </picture> </div> <div class="caption"> <span class="tag">Adventure</span> <h1 class="title">Tomb Raider: The reincarnation of Lara Croft</h1> <span class="author">by Ren Aysha</span> </div> </div> </div> <div class="news-item standard-item"> <div class="thumbnail"> <div class="image-wrapper"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(max-width: 1000px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/dishonored-small.jpg"> <source media="(min-width: 1100px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/dishonored-2-medium.jpg"> <!--[if IE 9]></video><![endif]--> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/dishonored-small.jpg" alt="Dishonored 2" class="responsive-img"> </picture> </div> <div class="caption"> <span class="tag">Stealth</span> <h1 class="title">Dishonored 2: Creative Kills have never look so good</h1> <span class="author">by Ren Aysha</span> </div> </div> </div> <div class="news-item standard-item"> <div class="thumbnail"> <div class="image-wrapper"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/infinite-small.jpg" alt="Bioshock Infinite" class="responsive-img"> </div> <div class="caption"> <span class="tag">First person shooter</span> <h1 class="title">Bioshock Infinite: Colorful instead of morbid</h1> <span class="author">by Ren Aysha</span> </div> </div> </div> <div class="news-item standard-item"> <div class="thumbnail"> <div class="image-wrapper"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(max-width: 599px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/trine-2-large.png"> <source media="(min-width: 600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/trine-2-small.png"> <!--[if IE 9]></video><![endif]--> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/trine-2-large.png" alt="Trine 2" class="responsive-img"> </picture> </div> <div class="caption"> <span class="tag">Review</span> <h1 class="title">Trine 2: Entertaining & Funny</h1> <span class="author">by Ren Aysha</span> </div> </div> </div> <div class="news-item standard-item"> <div class="thumbnail"> <div class="image-wrapper"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(max-width: 1000px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/wild-hunt-small.jpg"> <source media="(min-width: 1100px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/wild-hunt-medium.jpg"> <!--[if IE 9]></video><![endif]--> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/wild-hunt-small.jpg" alt="Witcher 3: Wild Hunt" class="responsive-img"> </picture> </div> <div class="caption"> <span class="tag">Adventure</span> <h1 class="title">Witcher 3: Blood and Wine</h1> <span class="author">by Ren Aysha</span> </div> </div> </div> </div>
* { box-sizing: border-box; position: relative; } body { margin: 0 3px; font-family: 'Lato', sans-serif; } img { display: block; object-fit: cover; } .wrapper { max-width: 1440px; margin: 3px auto; font-size: 0; display: grid; grid-gap: 3px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 728px) { .wrapper { grid-template-columns: repeat(4, 1fr); } } /* Styles related to the thumbnails */ .responsive-img { max-width: 100%; height: auto; width: 100%; } .caption { padding: 16px; } .title, .tag { text-transform: uppercase; letter-spacing: 1px; } .title { font-size: 1.1em; font-weight: bold; margin-bottom: 4px; line-height: 1.35em; } .tag { background: #ff0052; padding: 4px 8px; display: inline-block; margin-bottom: 8px; font-size: 12px; } .thumbnail { color: #fff; position: relative; overflow: hidden; } .image-wrapper:after { background: -webkit-gradient(linear, left bottom, left top, color-stop(1, transparent), color-stop(0, black)); bottom: 0; content: ""; left: 0; opacity: .5; position: absolute; right: 0; top: 0; z-index: 2; } .title, .author { color: #333; } .news-item { display: inline-block; vertical-align: top; font-size: 16px; padding: 2px; position: relative; } .hero-item, .standard-item { width: 50%; } @media (min-width: 728px) { .hero-item, .standard-item { width: 25%; } } /* For browsers with grid */ @supports (display: grid) { .wrapper > *, .standard-item:nth-child(4), .standard-item:nth-child(5), .standard-item:nth-child(6) { margin: 0; width: auto; } .news-item { padding: 0; } @media (min-width: 1100px) { .news-item:first-child:before, .news-item:first-child:after, .news-item:nth-child(4):before, .news-item:nth-child(4):after, .news-item:nth-child(5):before, .news-item:nth-child(5):after, .news-item:nth-child(8):before, .news-item:nth-child(8):after { content: ""; width: 0; height: 0; border: 0 solid transparent; position: absolute; z-index: 5; display: block; } .news-item:first-child:before, .news-item:nth-child(4):before, .news-item:nth-child(5):before, .news-item:nth-child(8):before { border-right-color: #fff; border-width: 0 55px 55px 0; right: 0; top: 0; } .news-item:first-child:after, .news-item:nth-child(4):after, .news-item:nth-child(5):after, .news-item:nth-child(8):after { border-right-color: #fff; border-width: 55px 55px 0 0; right: 0; bottom: 0; } .news-item:nth-child(4):before, .news-item:nth-child(8):before { top: 0; left: 0; border-left-color: #fff; border-width: 0 0 55px 55px; } .news-item:nth-child(4):after, .news-item:nth-child(8):after { border-bottom: 55px solid #fff; border-right: 55px solid transparent; left: 0; bottom: 0; } } @media (min-width: 1100px) { .standard-item:nth-child(2), .standard-item:nth-child(3), .standard-item:nth-child(6), .standard-item:nth-child(7) { border-top: 55px solid #fff; } } .caption { position: static; margin-right: auto; } @media (min-width: 1100px) { .hero-item .thumbnail, .hero-item .responsive-img, .hero-item .image-wrapper, .standard-item:nth-child(4) .thumbnail, .standard-item:nth-child(4) .responsive-img, .standard-item:nth-child(4) .image-wrapper, .standard-item:nth-child(5) .thumbnail, .standard-item:nth-child(5) .responsive-img, .standard-item:nth-child(5) .image-wrapper, .standard-item:nth-child(8) .thumbnail, .standard-item:nth-child(8) .responsive-img, .standard-item:nth-child(8) .image-wrapper { height: 100%; } .hero-item .responsive-img, .standard-item:nth-child(4) .responsive-img, .standard-item:nth-child(5) .responsive-img, .standard-item:nth-child(8) .responsive-img { width: 100%; } .hero-item .caption, .standard-item:nth-child(4) .caption, .standard-item:nth-child(5) .caption, .standard-item:nth-child(8) .caption { position: absolute; bottom: 0; z-index: 3; bottom: 32px; left: 8px; } .hero-item .title, .hero-item .author, .standard-item:nth-child(4) .title, .standard-item:nth-child(4) .author, .standard-item:nth-child(5) .title, .standard-item:nth-child(5) .author, .standard-item:nth-child(8) .title, .standard-item:nth-child(8) .author { color: #fff; } } }

Related: See More


Questions / Comments:

SuperB!

RJDami () - 4 years ago - Reply 0