10+ JavaScript Gallery Examples

This post contains a total of 10+ JavaScript Gallery Examples with Source Code. All these Galleries are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Gallery Examples

1. By Ivan Bogachev

Made by Ivan Bogachev. Horizontal Scroll Gallery, Locomotive Scroll. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
  height: 100%;
  background: #eee;
}
body {
  overflow: hidden;
}
.scroll-animations-example > .scrollsection {
  padding: 10vh 10vh 10vh 10vmax;
  min-width: 550vh;
}
.scroll-animations-example > .scrollsection > .item {
  display: inline-block;
  position: relative;
  margin: 0 -30vh 0 3vh;
}
.scroll-animations-example > .scrollsection > .item::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.scroll-animations-example > .scrollsection > .item.-big {
  height: 80vh;
  width: 60vh;
}
.scroll-animations-example > .scrollsection > .item.-big.-horizontal {
  height: 60vh;
  width: 80vh;
}
.scroll-animations-example > .scrollsection > .item.-normal {
  height: 60vh;
  width: 45vh;
  z-index: 1;
}
.scroll-animations-example > .scrollsection > .item.-normal.-horizontal {
  height: 45vh;
  width: 60vh;
}
.scroll-animations-example > .scrollsection > .item.-normal:nth-of-type(3n) {
  bottom: 5vh;
}
.scroll-animations-example > .scrollsection > .item.-normal:nth-of-type(4n) {
  bottom: -5vh;
}
.scroll-animations-example > .scrollsection > .item.-small {
  height: 40vh;
  width: 30vh;
  z-index: 2;
}
.scroll-animations-example > .scrollsection > .item.-small.-horizontal {
  height: 30vh;
  width: 40vh;
}
.scroll-animations-example > .scrollsection > .item.-small:nth-of-type(3n) {
  bottom: 13vh;
}
.scroll-animations-example > .scrollsection > .item.-small:nth-of-type(4n) {
  bottom: -13vh;
}
.scroll-animations-example > .scrollsection > .item > .image {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  filter: grayscale(1);
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) translateY(0) scale(1);
  transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
}
.scroll-animations-example > .scrollsection > .item:nth-of-type(4n) > .image {
  transform: translateX(-30vh) translateY(-30vh) scale(0.8);
  transition-delay: 0;
}
.scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 1) > .image {
  transform: translateX(30vh) translateY(30vh) scale(0.8);
  transition-delay: 0.05s;
}
.scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 2) > .image {
  transform: translateX(-30vh) translateY(30vh) scale(0.8);
  transition-delay: 0.1s;
}
.scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 3) > .image {
  transform: translateX(-30vh) translateY(-30vh) scale(0.8);
  transition-delay: 0.15s;
}
.scroll-animations-example > .scrollsection > .item > .image.-active {
  transform: translateX(0) translateY(0) scale(1);
  opacity: 0.8;
  pointer-events: auto;
  transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
}
.scroll-animations-example > .scrollsection > .item > .image.-clicked {
  transform: translateX(0) translateY(0) scale(5);
  opacity: 0;
  pointer-events: auto;
  transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
}
.scroll-animations-example > .scrollsection > .item > .image.-active:hover {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  filter: grayscale(0);
  opacity: 1;
  cursor: pointer;
}
.fake-ui {
  font-size: 0;
}
.fake-ui > .logo {
  position: fixed;
  top: 2vh;
  left: 2vh;
  height: 3vh;
  width: 2.5vh;
  border: solid 1vh #999;
}
.fake-ui > .nav {
  position: fixed;
  top: 2vh;
  right: 2vh;
}
.fake-ui > .nav > .item {
  background: #999;
  display: inline-block;
  height: 2vh;
  width: 10vh;
  margin-left: 2vh;
}
.fake-ui > .footer {
  position: fixed;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  height: 2vh;
  width: 40vh;
  background: #999;
}
</style>
</head>
<body>
  <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/locomotive-scroll.min.css' />
<script src='https://unpkg.com/[email protected]/dist/locomotive-scroll.min.js'></script>

<div class='scroll-animations-example' data-scroll-container>
    <div class='scrollsection' data-scroll-section>
        <div class='item -normal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/1005/300/400'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/1019/600/800'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://picsum.photos/id/1027/400/300'>
        </div>
        <div class='item -normal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/1028/300/400'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/1041/400/300'>
        </div>
        <div class='item -big -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://picsum.photos/id/1042/800/600'>
        </div>
        <div class='item -small' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/1049/300/400'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/1056/300/400'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/1062/400/300'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/1068/600/800'>
        </div>
        
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/1069/400/300'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/1072/300/400'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://picsum.photos/id/1075/400/300'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/1081/600/800'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/111/400/300'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://picsum.photos/id/129/400/300'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/137/600/800'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/141/300/400'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/145/400/300'>
        </div>
        <div class='item -normal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/147/300/400'>
        </div>
    </div>
</div>

<div class='fake-ui'>
    <div class='logo'></div>
    <div class='nav'>
        <span class='item'></span>
        <span class='item'></span>
        <span class='item'></span>
    </div>
    <div class='footer'></div>
</div>
      <script>
class Example {
  constructor(options) {
    this.root = options.root;

    this.init();

    setTimeout(this.showImages.bind(this), 1000);
  }

  init() {
    this.scroll = new LocomotiveScroll({
      el: this.root,
      direction: 'horizontal',
      smooth: true,
      lerp: 0.05,
      tablet: {
        smooth: true },

      smartphone: {
        smooth: true } });



    this.images = this.root.querySelectorAll('.image');

    [].forEach.call(this.images, image => {
      image.addEventListener('click', () => {
        image.classList.add('-clicked');
        this.hideImages();
      });
    });
  }

  showImages() {
    [].forEach.call(this.images, image => {
      image.classList.remove('-clicked');
      image.classList.add('-active');
    });
  }

  hideImages() {
    [].forEach.call(this.images, image => {
      image.classList.remove('-active');
    });

    setTimeout(this.showImages.bind(this), 2000);
  }}



window.addEventListener('DOMContentLoaded', event => {
  const example = new Example({
    root: document.querySelector('.scroll-animations-example') });

});
    </script>
</body>
</html>

2. by Jake’s Tuts

Made by Jake’s Tuts. Basic Image Thumbnail Gallery. Source

JavaScript Gallery by Jake Tuts
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href="https://leandrovieira.com/projects/jquery/lightbox/css/jquery.lightbox-0.5.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Lato|Skranji:700');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { 
  font-family: 'Lato', Calibri, Arial, sans-serif; 
  color: #343434; 
  font-size: 62.5%; 
  line-height: 1; 
  background: #cbdbf0 url('https://i.imgur.com/zSX1Hg6.png'); /* source: https://subtlepatterns.com/triangles-2/ */
}

br { display: block; line-height: 2.6em; } 

::selection { background: #cedef2; color: #212121; }
::-moz-selection { background: #cedef2; color: #212121; }
::-webkit-selection { background: #cedef2; color: #212121; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { color: #a991c7; }
a:hover { color: #b9a6d1; }

h1 {
  font-size: 3.4em;
  line-height: 1.75em;
  margin-bottom: 20px;
  font-family: 'Skranji', 'Trebuchet MS', Verdana, sans-serif;
  font-weight: 700;
  color: #515151;
  text-align: right;
  text-shadow: 0 2px white, 0 3px #666;  
}

p { display: block; font-size: 1.35em; line-height: 1.1em; margin-bottom: 15px; }


/* page structure */
#wrapper {
  display: block;
  max-width: 750px;
  min-width: 300px;
  margin: 0 auto;
  margin-top: 45px;
}

#content {
  display: block;
  background: #fff;
  margin: 0 20px;
  padding: 14px 18px;
  margin-bottom: 30px;
  -webkit-box-shadow: 1px 3px 8px 0 rgba(38,38,38,0.6);
  -moz-box-shadow: 1px 3px 8px 0 rgba(38,38,38,0.6);
  box-shadow: 1px 3px 8px 0 rgba(38,38,38,0.6);
}


/* gallery display */
.photos {
  display: block;
}

.photos ul {
  list-style: none;

}

.photos ul li { display: inline; }

.photos ul li a {
  display: block;
  float: left;
  padding: 4px;
  margin-right: 10px;
  margin-bottom: 7px;
  opacity: 0.75;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.photos ul li a:hover {
  opacity: 1.0;
}

.photos ul li a img {
  border: 6px solid #e1d9ec;
}

/* footer */
#credits {
  display: block;
  padding: 5px 6px;
  text-align: center;
}

#credits p {
  font-size: 1.2em;
  color: #666;
  text-shadow: 0 1px 0 #fff;
}

#credits p a {
  color: #798fad;
}
#credits p a:hover {
  color: #4d6b94;
}

/* CSS Clearfix */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

.clearfix { zoom: 1; } /* IE 6/7 */


/* lightbox hacks */
#lightbox-container-image-data-box {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/** uncomment to remove lightbox captions 
 *
#lightbox-container-image-data-box {
  display: none !important;
} 
 *
**/
</style>
</head>
<body>
  <body>
  <div id="wrapper">
    <div id="content">
      <h1>Lightbox Thumbnail Gallery</h1>
      
      <div class="photos">
        <ul class="clearfix">
          <!-- ATTRIBUTION: http://dribbble.com/shots/963800-New-App-design -->
          <li><a href="https://i.imgur.com/xcJnVXQ.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/963800-New-App-design' target='_blank'>Natalia Berowska</a>"><img src="https://i.imgur.com/uHfYjsK.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/963671-Navigation -->
          <li><a href="https://i.imgur.com/aIhKIUa.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/963671-Navigation' target='_blank'>Matt D. Smith</a>"><img src="https://i.imgur.com/EOoQQmW.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/962966-Share -->
          <li><a href="https://i.imgur.com/RkS7wPJ.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/962966-Share' target='_blank'>Nicholas Swanson</a>"><img src="https://i.imgur.com/VPTqPdp.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/961333-Profile-Screen-WIP -->
          <li><a href="https://i.imgur.com/WnPWszE.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/961333-Profile-Screen-WIP' target='_blank'>Alex Sharpz</a>"><img src="https://i.imgur.com/G7EKgOQ.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/961314-Chat-IOS-App -->
          <li><a href="https://i.imgur.com/A5i8Bh8.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/961314-Chat-IOS-App' target='_blank'>Daniela Alves</a>"><img src="https://i.imgur.com/myR8vnh.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/958102-Traveler-3-0-Favorites -->
          <li><a href="https://i.imgur.com/Tt4lSvw.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/958102-Traveler-3-0-Favorites' target='_blank'>Lynette Liwanag</a>"><img src="https://i.imgur.com/RD57vEE.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/960585-Twitter-Client-UI-Design -->
          <li><a href="https://i.imgur.com/ylpbRQi.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/960585-Twitter-Client-UI-Design' target='_blank'>Mike Hince</a>"><img src="https://i.imgur.com/qdQEJdy.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/957175-Share-Section -->
          <li><a href="https://i.imgur.com/tFNQYQw.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/957175-Share-Section' target='_blank'>Evan Kimia</a>"><img src="https://i.imgur.com/Kjpl4Ux.png" width="150" height="150"></a></li>
        </ul>
      </div>
      
      <h1>Secondary Gallery</h1>
      <div class="photos">
        <ul class="clearfix">
          <!-- ATTRIBUTION: http://dribbble.com/shots/965861-Gas-Heater-Ios-Icon -->
          <li><a href="https://i.imgur.com/y10RjXf.png" rel="2ndlightbox" title="Designed by Edu Torres"><img src="https://i.imgur.com/6hXASFX.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/964877-PassBox-iOS-Icon -->
          <li><a href="https://i.imgur.com/zxeSqXy.png" rel="2ndlightbox" title="Designed by Takahashi Alex"><img src="https://i.imgur.com/toRiLo3.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/965043-DINO-DOMINION-iOS-Icon -->
          <li><a href="https://i.imgur.com/h1QBn3o.png" rel="2ndlightbox" title="Designed by Gregory Kozhemyak"><img src="https://i.imgur.com/Y8Za1a5.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/961772-Tagger-icon -->
          <li><a href="https://i.imgur.com/MZe8Klr.png" rel="2ndlightbox" title="Designed by Alex Bender"><img src="https://i.imgur.com/rnSzelo.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/957195-Air-Hockey -->
          <li><a href="https://i.imgur.com/qAIJ1sc.png" rel="2ndlightbox" title="Designed by Alex Bender"><img src="https://i.imgur.com/hhCoryO.png" width="150" height="150"></a></li>
          
          <!-- ATTRIBUTION: http://dribbble.com/shots/955207-iOS-App-Icon-Design-Reading-Rainbow -->
          <li><a href="https://i.imgur.com/ddulKwU.png" rel="2ndlightbox" title="Designed by The Iconfactory"><img src="https://i.imgur.com/5T1tKRq.png" width="150" height="150"></a></li>
        </ul>
      </div>
    </div> <!-- /end #content -->
  </div>
</body>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js"></script>
      <script>
$(function () {
  $('a[rel=lightbox]').lightBox({
    containerResizeSpeed: 250,
    fixedNavigation: true });

  $('a[rel=2ndlightbox]').lightBox({
    overlayBgColor: '#fff',
    overlayOpacity: 0.7 });

});
    </script>
</body>
</html>

3. By Fabio Ottaviani

Made by Fabio Ottaviani. CSS Gallery with Popup Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300'>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  display: block;
}

.gallery {
  position: relative;
  z-index: 2;
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  transition: all 0.5s ease-in-out;
  transform: translateZ(0);
}
.gallery.pop {
  filter: blur(10px);
}
.gallery figure {
  flex-basis: 33.333%;
  padding: 10px;
  overflow: hidden;
  cursor: pointer;
}
.gallery figure img {
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.gallery figure figcaption {
  display: none;
}

.popup {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  opacity: 0;
  transition: opacity 0.5s ease-in-out 0.2s;
}
.popup.pop {
  opacity: 1;
  transition: opacity 0.2s ease-in-out 0s;
}
.popup.pop figure {
  margin-top: 0;
  opacity: 1;
}
.popup figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  margin-top: 30px;
  opacity: 0;
  -webkit-animation: poppy 500ms linear both;
          animation: poppy 500ms linear both;
}
.popup figure img {
  position: relative;
  z-index: 2;
}
.popup figure figcaption {
  position: absolute;
  bottom: 50px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
  z-index: 2;
  width: 100%;
  padding: 100px 20px 20px 20px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 32px;
}
.popup figure figcaption small {
  font-size: 11px;
  display: block;
  text-transform: uppercase;
  margin-top: 12px;
  text-indent: 3px;
  opacity: 0.7;
  letter-spacing: 1px;
}
.popup figure .shadow {
  position: relative;
  z-index: 1;
  top: -56px;
  margin: 0 auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 98%;
  height: 50px;
  opacity: 0.9;
  filter: blur(16px) contrast(1.5);
  transform: scale(0.95, -0.7);
  transform-origin: center bottom;
}
.popup .close {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url(#close);
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.popup .close svg {
  width: 100%;
  height: 100%;
}

@-webkit-keyframes poppy {
  0% {
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
  }
  4.3% {
    transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
  }
  4.7% {
    transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
  }
  6.81% {
    transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
  }
  8.61% {
    transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
  }
  9.41% {
    transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
  }
  10.21% {
    transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
  }
  12.91% {
    transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
  }
  13.61% {
    transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
  }
  14.11% {
    transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
  }
  17.22% {
    transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
  }
  17.52% {
    transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
  }
  18.72% {
    transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
  }
  21.32% {
    transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
  }
  24.32% {
    transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
  }
  25.23% {
    transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
  }
  28.33% {
    transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
  }
  29.03% {
    transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
  }
  29.93% {
    transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
  }
  35.54% {
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
  }
  36.74% {
    transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
  }
  39.44% {
    transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
  }
  41.04% {
    transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
  }
  44.44% {
    transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
  }
  52.15% {
    transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
  }
  59.86% {
    transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
  }
  61.66% {
    transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
  }
  63.26% {
    transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
  }
  75.28% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
  }
  83.98% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
  }
  85.49% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
  }
  90.69% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
  }
}

@keyframes poppy {
  0% {
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
  }
  4.3% {
    transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
  }
  4.7% {
    transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
  }
  6.81% {
    transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
  }
  8.61% {
    transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
  }
  9.41% {
    transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
  }
  10.21% {
    transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
  }
  12.91% {
    transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
  }
  13.61% {
    transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
  }
  14.11% {
    transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
  }
  17.22% {
    transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
  }
  17.52% {
    transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
  }
  18.72% {
    transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
  }
  21.32% {
    transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
  }
  24.32% {
    transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
  }
  25.23% {
    transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
  }
  28.33% {
    transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
  }
  29.03% {
    transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
  }
  29.93% {
    transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
  }
  35.54% {
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
  }
  36.74% {
    transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
  }
  39.44% {
    transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
  }
  41.04% {
    transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
  }
  44.44% {
    transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
  }
  52.15% {
    transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
  }
  59.86% {
    transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
  }
  61.66% {
    transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
  }
  63.26% {
    transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
  }
  75.28% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
  }
  83.98% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
  }
  85.49% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
  }
  90.69% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
  }
}
</style>
</head>
<body>
<div class="gallery">
  <figure>
    <img src="https://images.unsplash.com/photo-1448814100339-234df1d4005d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Daytona Beach <small>United States</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Π’Π΅Ρ€ΠΈΠ±Π΅Ρ€ΠΊΠ°, gorod Severomorsk <small>Russia</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>
      Bad Pyrmont <small>Deutschland</small>
    </figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Yellowstone National Park <small>United States</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1440339738560-7ea831bf5244?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Quiraing, Portree <small>United Kingdom</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Highlands <small>United States</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1448814100339-234df1d4005d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Daytona Beach <small>United States</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Π’Π΅Ρ€ΠΈΠ±Π΅Ρ€ΠΊΠ°, gorod Severomorsk <small>Russia</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>
      Bad Pyrmont <small>Deutschland</small>
    </figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Yellowstone National Park <small>United States</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1440339738560-7ea831bf5244?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Quiraing, Portree <small>United Kingdom</small></figcaption>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
    <figcaption>Highlands <small>United States</small></figcaption>
  </figure>
</div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
  <symbol id="close" viewBox="0 0 18 18">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M9,0.493C4.302,0.493,0.493,4.302,0.493,9S4.302,17.507,9,17.507
			S17.507,13.698,17.507,9S13.698,0.493,9,0.493z M12.491,11.491c0.292,0.296,0.292,0.773,0,1.068c-0.293,0.295-0.767,0.295-1.059,0
			l-2.435-2.457L6.564,12.56c-0.292,0.295-0.766,0.295-1.058,0c-0.292-0.295-0.292-0.772,0-1.068L7.94,9.035L5.435,6.507
			c-0.292-0.295-0.292-0.773,0-1.068c0.293-0.295,0.766-0.295,1.059,0l2.504,2.528l2.505-2.528c0.292-0.295,0.767-0.295,1.059,0
			s0.292,0.773,0,1.068l-2.505,2.528L12.491,11.491z"/>
  </symbol>
</svg>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
popup = {
  init: function () {
    $('figure').click(function () {
      popup.open($(this));
    });

    $(document).on('click', '.popup img', function () {
      return false;
    }).on('click', '.popup', function () {
      popup.close();
    });
  },
  open: function ($figure) {
    $('.gallery').addClass('pop');
    $popup = $('<div class="popup" />').appendTo($('body'));
    $fig = $figure.clone().appendTo($('.popup'));
    $bg = $('<div class="bg" />').appendTo($('.popup'));
    $close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig);
    $shadow = $('<div class="shadow" />').appendTo($fig);
    src = $('img', $fig).attr('src');
    $shadow.css({ backgroundImage: 'url(' + src + ')' });
    $bg.css({ backgroundImage: 'url(' + src + ')' });
    setTimeout(function () {
      $('.popup').addClass('pop');
    }, 10);
  },
  close: function () {
    $('.gallery, .popup').removeClass('pop');
    setTimeout(function () {
      $('.popup').remove();
    }, 100);
  } };


popup.init();
    </script>
</body>
</html>

4. By Michal Niewitala

Made by Michal Niewitala. Magnific Gallery V2. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.min.css'>
<style>
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  font-feature-settings: "liga", "kern";
  font-family: "Montserrat", "HelveticaNeueLTStd", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.5;
}

.fadein {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.fadein.lazyloaded {
  opacity: 1;
}

.blur-up {
  will-change: filter, opacity, transform;
  filter: blur(3px);
  transition: transform 1s, opacity 1s, blur 0.3s;
  opacity: 0;
  transform: scale(0.95);
  transform-origin: center;
}
.blur-up:not(.lazyload) {
  opacity: 1;
  transform: scale(1);
}
.blur-up.lazyloaded {
  filter: blur(0);
}

.spinner {
  background: rgba(0, 0, 0, 0.03) url("../images/ui/spinner.svg") no-repeat center;
}

::-moz-selection {
  color: white;
  background: black;
  text-shadow: none;
}

::selection {
  color: white;
  background: black;
  text-shadow: none;
}

.custom-background:after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  z-index: -3;
  background-attachment: scroll;
  min-height: 100vh;
  height: calc(100vw * 16 / 9);
}
@media (orientation: landscape) {
  .custom-background:after {
    height: calc(100vw * 3 / 4);
  }
}

[id=wrapper] .page-header > *:first-child:not(img):not(form):not(figure):not(div), [id=sidebar] > * > *:first-child:not(img):not(form):not(figure):not(div), [id=footer] .container > *:first-child:not(img):not(form):not(figure):not(div) {
  margin-top: -0.25em;
}
[id=wrapper] .page-header > *:last-child:not(img):not(form):not(figure):not(div), [id=sidebar] > * > *:last-child:not(img):not(form):not(figure):not(div), [id=footer] .container > *:last-child:not(img):not(form):not(figure):not(div) {
  margin-bottom: -0.25em;
}

[id=sidebar] a {
  position: relative;
  display: inline-block;
}
[id=sidebar] a:before, [id=sidebar] a:after {
  content: "";
  position: absolute;
  top: -0.5em;
  right: -0.75em;
  bottom: -0.5em;
  left: -0.75em;
  display: block;
}
[id=sidebar] a:before {
  transform-origin: right 0;
  transform: scaleX(0);
  transition: transform 0.3s, transform-origin 0.3s;
  background: black;
  z-index: -1;
}
[id=sidebar] a:hover {
  color: white;
  transition: color 0.15s 0.15s;
}
[id=sidebar] a:hover:before {
  transform-origin: left 0;
  transform: scaleX(1);
  transition: transform-origin 0s, transform 0.3s;
}
[id=sidebar] a:hover:after {
  z-index: 1;
}

[id=sidebar] > * {
  position: relative;
}
[id=sidebar] > :before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: calc((.75rem + 1.25vw)*-1);
  z-index: -2;
  transition: background 0.2s ease;
  background-color: rgba(255, 255, 255, 0);
}
[id=sidebar] > :hover:before, [id=sidebar] > :focus:before {
  background-color: white;
}

.single [id=main] {
  position: relative;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
}
.single [id=main]:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: calc((.75rem + 1.25vw)*-1);
  background: white;
}

h1, h2, fieldset legend, h3, h4, h5, h6 {
  margin: 1rem 0;
  font-family: "Montserrat", "HelveticaNeueLTStd", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
h1:not([class]), h2:not([class]), fieldset legend:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]) {
  max-width: 60rem;
}

h1 {
  font-weight: 600;
  line-height: 1.25;
}
h1 {
  font-size: 1.29616rem;
}
@media screen and (min-width: 37.5rem) {
  h1 {
    font-size: calc(1.29616rem + 1.86118 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h1 {
    font-size: 3.15733rem;
  }
}

h2, fieldset legend {
  font-weight: 600;
  line-height: 1.375;
}
h2, fieldset legend {
  font-size: 1.21477rem;
}
@media screen and (min-width: 37.5rem) {
  h2, fieldset legend {
    font-size: calc(1.21477rem + 1.15383 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h2, fieldset legend {
    font-size: 2.36859rem;
  }
}

h3 {
  font-weight: 500;
}
h3 {
  font-size: 1.13849rem;
}
@media screen and (min-width: 37.5rem) {
  h3 {
    font-size: calc(1.13849rem + 0.6384 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h3 {
    font-size: 1.77689rem;
  }
}

h4 {
  font-weight: 500;
}
h4 {
  font-size: 1.067rem;
}
@media screen and (min-width: 37.5rem) {
  h4 {
    font-size: calc(1.067rem + 0.266 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h4 {
    font-size: 1.333rem;
  }
}

h5 {
  font-weight: 500;
}
h5 {
  font-size: 1rem;
}
@media screen and (min-width: 37.5rem) {
  h5 {
    font-size: calc(1rem + 0 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h5 {
    font-size: 1rem;
  }
}

h6 {
  font-weight: 500;
}
h6 {
  font-size: 0.93721rem;
}
@media screen and (min-width: 37.5rem) {
  h6 {
    font-size: calc(0.93721rem + -0.18702 * ((100vw - 37.5rem) / 42.5));
  }
}
@media screen and (min-width: 80rem) {
  h6 {
    font-size: 0.75019rem;
  }
}

a {
  color: inherit;
  text-decoration: none;
}
a:focus {
  outline: none;
}

small {
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  pre {
    overflow: hidden;
  }
}

p, ul, dl, ol, blockquote {
  margin: 1.25em 0;
}
p:not([class]), ul:not([class]), dl:not([class]), ol:not([class]), blockquote:not([class]) {
  max-width: 60rem;
}

ul {
  list-style-type: square;
}

hr {
  border: none;
  border-bottom: 2px dashed black;
  margin: calc(.75rem + 1.25vw) 0;
}

fieldset {
  border: 1rem solid rgba(0, 0, 0, 0.02);
  margin-left: -1rem;
  margin-right: -1rem;
  padding: calc(.75rem + 1.25vw);
}
fieldset legend {
  border: 1rem solid rgba(0, 0, 0, 0.02);
  margin-bottom: 0;
  background-color: white;
  padding: 0.25em 0.5em;
}
fieldset > * {
  margin-left: auto;
  margin-right: auto;
}

figure {
  margin: 0;
}
figure[style] {
  max-width: 100%;
}

img, svg {
  max-width: 100%;
  height: auto;
  border: 0;
}

table {
  background: rgba(0, 0, 0, 0.02);
  width: 100%;
}
table th, table td {
  padding: 0.75em 1em;
}
table th:not(:last-child), table td:not(:last-child) {
  border-right: 0.5rem solid white;
}
table tr:not(:last-child) td, table tr:not(:last-child) th {
  border-bottom: 0.5rem solid white;
}
table th {
  background: rgba(0, 0, 0, 0.02);
}
table td {
  font-size: 0.875em;
}
table th, table caption {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
}
table caption {
  padding: 1.25em 0.5em 0;
}

ol, ul {
  padding: 0;
  list-style-position: inside;
}
ol li + li, ul li + li {
  margin-top: 0.5em;
}

[id=main] .entry {
  font-family: "PT Serif", serif;
}
[id=main] .entry a {
  text-decoration: underline;
}

.container, body:not(.has-gallery):not(.single-format-gallery):not(.page-template-gallery) [id=wrapper], .single-format-gallery [id=sidebar], .page-template-gallery [id=sidebar] {
  max-width: 100rem;
  padding-left: calc(.75rem + 1.25vw);
  padding-right: calc(.75rem + 1.25vw);
  margin-left: auto;
  margin-right: auto;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

[id=wrapper] {
  flex: 1;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-top: calc(.75rem + 1.25vw);
  padding-bottom: calc((.75rem + 1.25vw)*2);
}
@media (min-width: 1020px) {
  body:not(.has-gallery) [id=wrapper], body:not(.single-format-gallery) [id=wrapper], [id=wrapper] body:not(.page-template-gallery) {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
}
[id=wrapper] > * + * {
  margin-top: calc((.75rem + 1.25vw)*2);
}
.has-gallery [id=wrapper], .has-gallery [id=wrapper] main, .single-format-gallery [id=wrapper], .single-format-gallery [id=wrapper] main, .page-template-gallery [id=wrapper], .page-template-gallery [id=wrapper] main {
  padding-top: 0;
  max-width: none;
}
[id=wrapper] .gallery-grid:first-child {
  padding-top: calc((.75rem + 1.25vw)*2);
}
[id=wrapper] .gallery-grid:last-child {
  padding-bottom: calc((.75rem + 1.25vw)*2);
}
[id=wrapper] .page-header {
  text-align: center;
  margin-bottom: calc((.75rem + 1.25vw)*2);
  text-transform: uppercase;
}

@media (min-width: 1020px) {
  [id=main] {
    width: calc(100% - 280px + ((.75rem + 1.25vw)*-1*2));
    margin-right: calc((.75rem + 1.25vw)*2);
  }
  [id=main]:only-child, .single-format-gallery [id=main], .page-template-gallery [id=main] {
    width: 100%;
    margin-right: 0;
  }
}
.single [id=main]:not(:only-child) + * {
  margin-left: calc((.75rem + 1.25vw)*2);
}
[id=main] > * + * {
  margin-top: calc((.75rem + 1.25vw)*3);
}

[id=sidebar] {
  font-size: 0.75em;
  transition: color 0.15s 0.15s;
}
@media (min-width: 1020px) {
  body:not(.single-format-gallery):not(.page-template-gallery) [id=sidebar] {
    width: calc(280px);
    margin-top: 0;
  }
}
[id=sidebar] > * + * {
  margin-top: calc((.75rem + 1.25vw)*2);
}
@media (min-width: 640px) and (max-width: 769px) {
  [id=sidebar] {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  [id=sidebar] > [class*=search] {
    width: 100%;
  }
  [id=sidebar] > *:not([class*=search]) {
    width: calc((100% - 1.5rem - 3vw)/2);
  }
}
[id=sidebar] h1, [id=sidebar] h2, [id=sidebar] fieldset legend, fieldset [id=sidebar] legend {
  font-size: 1.25em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid;
  padding-bottom: 0.5rem;
}
[id=sidebar] li {
  display: block;
  padding-left: calc(.75rem + 1.25vw);
  position: relative;
}
[id=sidebar] li:before {
  content: "";
  position: absolute;
  top: calc(.75em - 1px);
  left: 0;
  border-top: 2px solid;
  width: 4px;
}
@media (min-width: 770px) {
  .single-format-gallery [id=sidebar], .page-template-gallery [id=sidebar] {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
  }
  .single-format-gallery [id=sidebar] > *[class*=search], .page-template-gallery [id=sidebar] > *[class*=search] {
    width: 100%;
  }
  .single-format-gallery [id=sidebar] > *:not([class*=search]), .page-template-gallery [id=sidebar] > *:not([class*=search]) {
    width: calc((100% - (.75rem + 1.25vw)*8) / 4);
  }
  .single-format-gallery [id=sidebar] > *, .page-template-gallery [id=sidebar] > * {
    margin: calc(.75rem + 1.25vw);
  }
}
[id=sidebar].background--dark, [id=sidebar].background--complex, .background--dark [id=sidebar] {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[id=sidebar].background--dark > *:hover, [id=sidebar].background--complex > *:hover, .background--dark [id=sidebar] > *:hover {
  color: black;
  text-shadow: none;
}

[id=footer] {
  text-align: center;
  position: relative;
}
[id=footer] .container {
  padding: calc((.75rem + 1.25vw)*2) 0;
  min-height: 100%;
  box-sizing: border-box;
}
[id=footer] .container:after {
  left: auto;
  right: calc(.75rem + 1.25vw);
}
[id=footer] .container > * {
  display: block;
}
[id=footer] .container > * + * {
  margin-top: calc(.75rem + 1.25vw);
}
[id=footer] .footer-title {
  font-weight: 600;
  font-size: 1.5em;
}
[id=footer] .footer-entry {
  text-transform: uppercase;
  font-size: 0.75em;
}
[id=footer] .container {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[id=footer] .container:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("images/ui/target.svg") no-repeat left top, url("images/ui/target.svg") no-repeat right top, url("images/ui/target.svg") no-repeat left bottom, url("images/ui/target.svg") no-repeat right bottom;
  margin: 0 -16px -16px;
  z-index: -1;
}
.custom-background [id=footer] {
  height: 100vh;
  overflow: visible;
}
.custom-background [id=footer] .container {
  display: flex;
  flex-direction: column;
}
.custom-background [id=footer] .container:before {
  margin: calc(.75rem + 1.25vw);
  background-image: url("http://dev.mobilemarkup.com/calibration/wp-content/themes/calibration/assets/images/ui/target-background.svg");
  background-size: contain;
  background-position: center;
}
.custom-background [id=footer] .container > *:first-child {
  margin-top: auto !important;
}
[id=footer].background--dark, .background--dark [id=footer] {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html:not(.touchevents) .gallery-caption {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0);
  padding: 1.25em 1.5em;
  transition: all 0.2s ease;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}
@media (min-width: 640px) {
  html:not(.touchevents) .gallery-caption {
    font-size: 14px;
  }
}
html:not(.touchevents) .gallery-caption:before, html:not(.touchevents) .gallery-caption:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease 0s;
  z-index: -1;
}
html:not(.touchevents) .gallery-caption:before {
  top: auto;
  height: 3px;
  transform: scale(0, 1);
  transform-origin: bottom left;
  transition-delay: 0.6s;
}
html:not(.touchevents) .gallery-caption:after {
  transform: scale(1, 0);
  transform-origin: bottom;
  transition-delay: 0.3s;
}
html:not(.touchevents) .visible.gallery-caption, .gallery-item:hover .gallery-caption {
  color: white;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease 0.3s;
}
html:not(.touchevents) .visible.gallery-caption:before, .gallery-item:hover .gallery-caption:before {
  transform: scale(1, 1);
  transition-delay: 0s;
}
html:not(.touchevents) .visible.gallery-caption:after, .gallery-item:hover .gallery-caption:after {
  transform: scale(1, 1);
}
html:not(.touchevents) .gallery-caption:empty {
  display: none;
}

.gallery-item a {
  position: relative;
}
.gallery-item a:before, .gallery-item a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0 solid rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  will-change: border;
  z-index: 10;
}
.gallery-item a.active:before, .lazy-images .gallery-item a.image-lazyloaded:before, html:not(.lazy-images) .gallery-item a:before {
  border-width: 0.5rem;
}
.gallery-item a.active:after, .lazy-images .gallery-item a.image-lazyloaded:after, html:not(.lazy-images) .gallery-item a:after {
  border-width: 2px;
}
.gallery-item a:after {
  margin: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.5);
  -webkit-clip-path: polygon(0 calc(100% - 1rem), 0 100%, 1rem 100%, 1rem 0, 0 0, 0 1rem, 100% 1rem, 100% 0, calc(100% - 1rem) 0, calc(100% - 1rem) 100%, 100% 100%, 100% calc(100% - 1rem));
          clip-path: polygon(0 calc(100% - 1rem), 0 100%, 1rem 100%, 1rem 0, 0 0, 0 1rem, 100% 1rem, 100% 0, calc(100% - 1rem) 0, calc(100% - 1rem) 100%, 100% 100%, 100% calc(100% - 1rem));
}
.gallery-item a:hover:after {
  transform: scale(0.9);
  border-color: white;
}

.gallery {
  font-family: "Montserrat", "HelveticaNeueLTStd", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  width: 100%;
  display: grid;
  grid-template-rows: flow;
  grid-auto-flow: dense;
}
@media (max-width: 639px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 640px) and (max-width: 1019px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (1260px-px: 1020px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1260px) and (max-width: 1599px) {
  .gallery {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 1600px) {
  .gallery {
    grid-template-columns: repeat(6, 1fr);
  }
}

.gallery-item {
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.gallery-item img, .gallery-item a {
  display: block;
}
.vertical.gallery-item {
  grid-row: span 2;
}
.horizontal.gallery-item {
  grid-column: span 2;
}

.gallery-item a {
  display: block;
}

[class*=list] .gallery-caption, .gallery-size-thumbnail .gallery-caption {
  display: none;
}
</style>
</head>
<body>
  <div class="gallery" itemscope="" itemtype="http://schema.org/ImageGallery">
  <figure class="gallery-item horizontal" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/-gS54SWrHMg/2000x1000" itemprop="contentUrl" data-size="2000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%201000%20500'%20%2F%3E" data-src="https://source.unsplash.com/-gS54SWrHMg/1000x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item vertical" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/AU1rKyKPJco/1000x2000" itemprop="contentUrl" data-size="1000x2000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%201000'%20%2F%3E" data-src="https://source.unsplash.com/AU1rKyKPJco/500x1000" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Hello from Poland</figcaption>
  </figure>
  <figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/AXfDvKOawZQ/1000x1000" itemprop="contentUrl" data-size="1000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%20500'%20%2F%3E" data-src="https://source.unsplash.com/AXfDvKOawZQ/500x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item horizontal" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/gKlkZrsG_Pw/2000x1000" itemprop="contentUrl" data-size="2000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%201000%20500'%20%2F%3E" data-src="https://source.unsplash.com/gKlkZrsG_Pw/1000x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item vertical" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/DVONaLgCRxo/1000x2000" itemprop="contentUrl" data-size="1000x2000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%201000'%20%2F%3E" data-src="https://source.unsplash.com/DVONaLgCRxo/500x1000" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/o7txpYpxNLs/1000x1000" itemprop="contentUrl" data-size="1000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%20500'%20%2F%3E" data-src="https://source.unsplash.com/o7txpYpxNLs/500x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Have a nice day</figcaption>
  </figure>
  <figure class="gallery-item vertical" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/ZsgUsl8GATg/1000x2000" itemprop="contentUrl" data-size="1000x2000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%201000'%20%2F%3E" data-src="https://source.unsplash.com/ZsgUsl8GATg/500x1000" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">This is a very very long description to show you it's possible to add something like this</figcaption>
  </figure>
  <figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/CkagyZJ88kE/1000x1000" itemprop="contentUrl" data-size="1000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%20500'%20%2F%3E" data-src="https://source.unsplash.com/CkagyZJ88kE/500x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item horizontal" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/PpQ4-HOZ_8U/2000x1000" itemprop="contentUrl" data-size="2000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%201000%20500'%20%2F%3E" data-src="https://source.unsplash.com/PpQ4-HOZ_8U/1000x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/si7gjqJQj_8/1000x1000" itemprop="contentUrl" data-size="1000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%20500'%20%2F%3E" data-src="https://source.unsplash.com/si7gjqJQj_8/500x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item vertical" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/u0M0gyuexfE/1000x2000" itemprop="contentUrl" data-size="1000x2000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%201000'%20%2F%3E" data-src="https://source.unsplash.com/u0M0gyuexfE/500x1000" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/aQcE3gDSSTY/1000x1000" itemprop="contentUrl" data-size="1000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%20500'%20%2F%3E" data-src="https://source.unsplash.com/aQcE3gDSSTY/500x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item vertical" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/GkCafprWKRo/1000x2000" itemprop="contentUrl" data-size="1000x2000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%201000'%20%2F%3E" data-src="https://source.unsplash.com/GkCafprWKRo/500x1000" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/OFlzoTfpRdw/1000x1000" itemprop="contentUrl" data-size="1000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%20500'%20%2F%3E" data-src="https://source.unsplash.com/OFlzoTfpRdw/500x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/YlFM0-LdHu8/1000x1000" itemprop="contentUrl" data-size="1000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%20500'%20%2F%3E" data-src="https://source.unsplash.com/YlFM0-LdHu8/500x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
  <figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"><a href="https://source.unsplash.com/c_Tc9ZELeYw/1000x1000" itemprop="contentUrl" data-size="1000x1000"><img class="lazyload lazypreload fadein" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20500%20500'%20%2F%3E" data-src="https://source.unsplash.com/c_Tc9ZELeYw/500x500" itemprop="thumbnail" alt="Image description"/></a>
    <figcaption class="gallery-caption" itemprop="caption description">Caption</figcaption>
  </figure>
</div>
<!-- Root element of PhotoSwipe. Must have class pswp.-->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!--
  Background of PhotoSwipe.
  It's a separate element as animating opacity is faster than rgba().
  -->
  <div class="pswp__bg"></div>
  <!-- Slides wrapper with overflow:hidden.-->
  <div class="pswp__scroll-wrap">
    <!--
    Container that holds slides.
    PhotoSwipe keeps only 3 of them in the DOM to save memory.
    Don't modify these 3 pswp__item elements, data is added later on.
    -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.-->
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <!-- Controls are self-explanatory. Order can be changed.-->
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--share" title="Share"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR-->
        <!-- element will get class pswp__preloader--active when preloader is running-->
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.2/lazysizes.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe-ui-default.js'></script>
      <script>
(function() {
  var initPhotoSwipeFromDOM;

  initPhotoSwipeFromDOM = function(gallerySelector) {
    var closest, galleryElements, hashData, i, l, onThumbnailsClick, openPhotoSwipe, parseThumbnailElements, photoswipeParseHash;
    // parse slide data (url, title, size ...) from DOM elements 
    // (children of gallerySelector)
    parseThumbnailElements = function(el) {
      var figureEl, i, item, items, linkEl, numNodes, size, thumbElements;
      thumbElements = el.childNodes;
      numNodes = thumbElements.length;
      items = [];
      figureEl = void 0;
      linkEl = void 0;
      size = void 0;
      item = void 0;
      i = 0;
      while (i < numNodes) {
        figureEl = thumbElements[i];
        // <figure> element
        // include only element nodes 
        if (figureEl.nodeType !== 1) {
          i++;
          continue;
        }
        linkEl = figureEl.children[0];
        // <a> element
        size = linkEl.getAttribute('data-size').split('x');
        // create slide object
        item = {
          src: linkEl.getAttribute('href'),
          w: parseInt(size[0], 10),
          h: parseInt(size[1], 10)
        };
        if (figureEl.children.length > 1) {
          // <figcaption> content
          item.title = figureEl.children[1].innerHTML;
        }
        if (linkEl.children.length > 0) {
          // <img> thumbnail element, retrieving thumbnail url
          item.msrc = linkEl.children[0].getAttribute('src');
        }
        item.el = figureEl;
        // save link to element for getThumbBoundsFn
        items.push(item);
        i++;
      }
      return items;
    };
    // find nearest parent element
    closest = function(el, fn) {
      return el && (fn(el) ? el : closest(el.parentNode, fn));
    };
    // triggers when user clicks on thumbnail
    onThumbnailsClick = function(e) {
      var childNodes, clickedGallery, clickedListItem, eTarget, i, index, nodeIndex, numChildNodes;
      e = e || window.event;
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        (e.returnValue = false);
      }
      eTarget = e.target || e.srcElement;
      // find root element of slide
      clickedListItem = closest(eTarget, function(el) {
        return el.tagName && el.tagName.toUpperCase() === 'FIGURE';
      });
      if (!clickedListItem) {
        return;
      }
      // find index of clicked item by looping through all child nodes
      // alternatively, you may define index via data- attribute
      clickedGallery = clickedListItem.parentNode;
      childNodes = clickedListItem.parentNode.childNodes;
      numChildNodes = childNodes.length;
      nodeIndex = 0;
      index = void 0;
      i = 0;
      while (i < numChildNodes) {
        if (childNodes[i].nodeType !== 1) {
          i++;
          continue;
        }
        if (childNodes[i] === clickedListItem) {
          index = nodeIndex;
          break;
        }
        nodeIndex++;
        i++;
      }
      if (index >= 0) {
        // open PhotoSwipe if valid index found
        openPhotoSwipe(index, clickedGallery);
      }
      return false;
    };
    // parse picture index and gallery index from URL (#&pid=1&gid=2)
    photoswipeParseHash = function() {
      var hash, i, pair, params, vars;
      hash = window.location.hash.substring(1);
      params = {};
      if (hash.length < 5) {
        return params;
      }
      vars = hash.split('&');
      i = 0;
      while (i < vars.length) {
        if (!vars[i]) {
          i++;
          continue;
        }
        pair = vars[i].split('=');
        if (pair.length < 2) {
          i++;
          continue;
        }
        params[pair[0]] = pair[1];
        i++;
      }
      if (params.gid) {
        params.gid = parseInt(params.gid, 10);
      }
      return params;
    };
    openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
      var gallery, items, j, options, pswpElement;
      pswpElement = document.querySelectorAll('.pswp')[0];
      gallery = void 0;
      options = void 0;
      items = void 0;
      items = parseThumbnailElements(galleryElement);
      // define options (if needed)
      options = {
        galleryUID: galleryElement.getAttribute('data-pswp-uid'),
        getThumbBoundsFn: function(index) {
          var pageYScroll, rect, thumbnail;
          // See Options -> getThumbBoundsFn section of documentation for more info
          thumbnail = items[index].el.getElementsByTagName('img')[0];
          pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
          rect = thumbnail.getBoundingClientRect();
          return {
            x: rect.left,
            y: rect.top + pageYScroll,
            w: rect.width
          };
        }
      };
      // PhotoSwipe opened from URL
      if (fromURL) {
        if (options.galleryPIDs) {
          // parse real index when custom PIDs are used 
          // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
          j = 0;
          while (j < items.length) {
            if (items[j].pid === index) {
              options.index = j;
              break;
            }
            j++;
          }
        } else {
          // in URL indexes start from 1
          options.index = parseInt(index, 10) - 1;
        }
      } else {
        options.index = parseInt(index, 10);
      }
      // exit if index not found
      if (isNaN(options.index)) {
        return;
      }
      if (disableAnimation) {
        options.showAnimationDuration = 0;
      }
      // Pass data to PhotoSwipe and initialize it
      gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
      gallery.init();
    };
    // loop through all gallery elements and bind events
    galleryElements = document.querySelectorAll(gallerySelector);
    i = 0;
    l = galleryElements.length;
    while (i < l) {
      galleryElements[i].setAttribute('data-pswp-uid', i + 1);
      galleryElements[i].onclick = onThumbnailsClick;
      i++;
    }
    // Parse URL and open gallery if it contains #&pid=3&gid=1
    hashData = photoswipeParseHash();
    if (hashData.pid && hashData.gid) {
      openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
    }
  };

  // execute above function
  initPhotoSwipeFromDOM('.gallery');

  // ---
// generated by js2coffee 2.2.0

}).call(this);
    </script>
</body>
</html>

5. By Katherine Kato

Made by Katherine Kato. Gallery with Tooltip Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.0.12/css/all.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Barlow:400,500,700");
.container {
  margin: auto;
  padding: 0 1rem;
  max-width: 71.25rem;
  width: 100%;
}

.grid {
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
}
.grid > [class*=column-] {
  display: block;
}

.first {
  order: -1;
}

.last {
  order: 12;
}

.align-top {
  align-items: start;
}

.align-center {
  align-items: center;
}

.align-bottom {
  align-items: end;
}

.column-xs-1 {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

.column-xs-2 {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

.column-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.column-xs-4 {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

.column-xs-5 {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

.column-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.column-xs-7 {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

.column-xs-8 {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

.column-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.column-xs-10 {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

.column-xs-11 {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

.column-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 48rem) {
  .column-sm-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .column-sm-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .column-sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .column-sm-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .column-sm-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .column-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .column-sm-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .column-sm-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .column-sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .column-sm-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .column-sm-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .column-sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media (min-width: 62rem) {
  .column-md-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .column-md-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .column-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .column-md-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .column-md-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .column-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .column-md-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .column-md-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .column-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .column-md-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .column-md-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .column-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media (min-width: 75rem) {
  .column-lg-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .column-lg-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .column-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .column-lg-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .column-lg-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .column-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .column-lg-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .column-lg-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .column-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .column-lg-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .column-lg-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .column-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
  }
  .grid > [class*=column-] {
    margin: 0;
    max-width: 100%;
  }

  .column-xs-1 {
    grid-column-start: span 1;
    grid-column-end: span 1;
  }

  .column-xs-2 {
    grid-column-start: span 2;
    grid-column-end: span 2;
  }

  .column-xs-3 {
    grid-column-start: span 3;
    grid-column-end: span 3;
  }

  .column-xs-4 {
    grid-column-start: span 4;
    grid-column-end: span 4;
  }

  .column-xs-5 {
    grid-column-start: span 5;
    grid-column-end: span 5;
  }

  .column-xs-6 {
    grid-column-start: span 6;
    grid-column-end: span 6;
  }

  .column-xs-7 {
    grid-column-start: span 7;
    grid-column-end: span 7;
  }

  .column-xs-8 {
    grid-column-start: span 8;
    grid-column-end: span 8;
  }

  .column-xs-9 {
    grid-column-start: span 9;
    grid-column-end: span 9;
  }

  .column-xs-10 {
    grid-column-start: span 10;
    grid-column-end: span 10;
  }

  .column-xs-11 {
    grid-column-start: span 11;
    grid-column-end: span 11;
  }

  .column-xs-12 {
    grid-column-start: span 12;
    grid-column-end: span 12;
  }

  @media (min-width: 48rem) {
    .column-sm-1 {
      grid-column-start: span 1;
      grid-column-end: span 1;
    }

    .column-sm-2 {
      grid-column-start: span 2;
      grid-column-end: span 2;
    }

    .column-sm-3 {
      grid-column-start: span 3;
      grid-column-end: span 3;
    }

    .column-sm-4 {
      grid-column-start: span 4;
      grid-column-end: span 4;
    }

    .column-sm-5 {
      grid-column-start: span 5;
      grid-column-end: span 5;
    }

    .column-sm-6 {
      grid-column-start: span 6;
      grid-column-end: span 6;
    }

    .column-sm-7 {
      grid-column-start: span 7;
      grid-column-end: span 7;
    }

    .column-sm-8 {
      grid-column-start: span 8;
      grid-column-end: span 8;
    }

    .column-sm-9 {
      grid-column-start: span 9;
      grid-column-end: span 9;
    }

    .column-sm-10 {
      grid-column-start: span 10;
      grid-column-end: span 10;
    }

    .column-sm-11 {
      grid-column-start: span 11;
      grid-column-end: span 11;
    }

    .column-sm-12 {
      grid-column-start: span 12;
      grid-column-end: span 12;
    }
  }
  @media (min-width: 62rem) {
    .column-md-1 {
      grid-column-start: span 1;
      grid-column-end: span 1;
    }

    .column-md-2 {
      grid-column-start: span 2;
      grid-column-end: span 2;
    }

    .column-md-3 {
      grid-column-start: span 3;
      grid-column-end: span 3;
    }

    .column-md-4 {
      grid-column-start: span 4;
      grid-column-end: span 4;
    }

    .column-md-5 {
      grid-column-start: span 5;
      grid-column-end: span 5;
    }

    .column-md-6 {
      grid-column-start: span 6;
      grid-column-end: span 6;
    }

    .column-md-7 {
      grid-column-start: span 7;
      grid-column-end: span 7;
    }

    .column-md-8 {
      grid-column-start: span 8;
      grid-column-end: span 8;
    }

    .column-md-9 {
      grid-column-start: span 9;
      grid-column-end: span 9;
    }

    .column-md-10 {
      grid-column-start: span 10;
      grid-column-end: span 10;
    }

    .column-md-11 {
      grid-column-start: span 11;
      grid-column-end: span 11;
    }

    .column-md-12 {
      grid-column-start: span 12;
      grid-column-end: span 12;
    }
  }
  @media (min-width: 75rem) {
    .column-lg-1 {
      grid-column-start: span 1;
      grid-column-end: span 1;
    }

    .column-lg-2 {
      grid-column-start: span 2;
      grid-column-end: span 2;
    }

    .column-lg-3 {
      grid-column-start: span 3;
      grid-column-end: span 3;
    }

    .column-lg-4 {
      grid-column-start: span 4;
      grid-column-end: span 4;
    }

    .column-lg-5 {
      grid-column-start: span 5;
      grid-column-end: span 5;
    }

    .column-lg-6 {
      grid-column-start: span 6;
      grid-column-end: span 6;
    }

    .column-lg-7 {
      grid-column-start: span 7;
      grid-column-end: span 7;
    }

    .column-lg-8 {
      grid-column-start: span 8;
      grid-column-end: span 8;
    }

    .column-lg-9 {
      grid-column-start: span 9;
      grid-column-end: span 9;
    }

    .column-lg-10 {
      grid-column-start: span 10;
      grid-column-end: span 10;
    }

    .column-lg-11 {
      grid-column-start: span 11;
      grid-column-end: span 11;
    }

    .column-lg-12 {
      grid-column-start: span 12;
      grid-column-end: span 12;
    }
  }
}
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Barlow", sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #787878;
  background: #fff;
  text-rendering: optimizeLegibility;
}

ul li {
  margin: 0 1.5rem 0 0;
}

a {
  color: #787878;
  text-decoration: none;
  transition: all 0.2s ease;
}
a:hover {
  color: #2e2e2e;
}
a.active {
  color: #2e2e2e;
}

nav {
  padding: 2.5rem 0 2.5rem 0;
}
nav ul {
  display: flex;
  justify-content: flex-start;
}
nav li {
  font-size: 1.25rem;
}
nav li:nth-child(2) {
  margin: 0;
}

#highlight {
  color: #ea8478;
  font-size: 1.25rem;
}

.gallery {
  padding: 0 0 4rem 0;
}

.img-container {
  width: 100%;
  height: 500px;
  cursor: pointer;
  overflow: hidden;
}
.img-container:hover .img-content-hover {
  display: block;
}

img {
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}
img:hover {
  transform: scale(1.05);
}

.img-content-hover {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  display: none;
  padding: 1rem;
  background: #fff;
  font-weight: 400;
  margin-top: 1.25rem;
  margin-left: -2rem;
}

.title {
  color: #2e2e2e;
  font-size: 1.5rem;
  font-weight: 700;
}

.category {
  font-size: 1rem;
  color: #787878;
}

.img-content {
  display: none;
}

.social, .copyright {
  margin: 1rem;
}

.social li {
  display: inline-block;
}

footer {
  padding: 1rem 0;
  background: #f7f7f7;
  text-align: center;
}

@supports (display: grid) {
  .gallery .grid {
    grid-gap: 1rem;
  }
}
@media (min-width: 62rem) {
  nav ul {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1024px) {
  img:hover {
    transform: none;
  }

  .img-container {
    height: 100%;
  }
  .img-container:hover .img-content-hover {
    display: none;
  }

  .img-content {
    display: block;
    padding: 1rem 0;
  }
}
</style>
</head>
<body>
  <nav>
  <div class="container">
    <div class="grid">
      <div class="column-xs-12 column-md-10">
        <p id="highlight">Katherine Kato</p>
      </div>
      <div class="column-xs-12 column-md-2">
        <ul>
          <li><a href="#" class="active">Work</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<section class="gallery">
  <div class="container">
    <div class="grid">
      <div class="column-xs-12 column-md-4">
        <figure class="img-container">
          <img src="https://source.unsplash.com/8b1cWDyvT7Y" />
          <figcaption class="img-content">
            <h2 class="title">Smart Watch</h2>
            <h3 class="category">Showcase</h3>
          </figcaption>
          <span class="img-content-hover">
            <h2 class="title">Smart Watch</h2>
            <h3 class="category">Showcase</h3>
          </span>
        </figure>
      </div>
      <div class="column-xs-12 column-md-4">
        <figure class="img-container">
          <img src="https://source.unsplash.com/5VXH4RG88gc" />
          <figcaption class="img-content">
            <h2 class="title">Camera Film</h2>
            <h3 class="category">Showcase</h3>
          </figcaption>
          <span class="img-content-hover">
            <h2 class="title">Camera Film</h2>
            <h3 class="category">Showcase</h3>
          </span>
        </figure>
      </div>
      <div class="column-xs-12 column-md-4">
        <figure class="img-container">
          <img src="https://source.unsplash.com/XtUd5SiX464">
          <figcaption class="img-content">
            <h2 class="title">Coffee</h2>
            <h3 class="category">Showcase</h3>
          </figcaption>
          <span class="img-content-hover">
            <h2 class="title">Coffee</h2>
            <h3 class="category">Showcase</h3>
          </span>
        </figure>
      </div>
      <div class="column-xs-12 column-md-6">
        <figure class="img-container">
          <img src="https://source.unsplash.com/JYGnB9gTCls" />
          <figcaption class="img-content">
            <h2 class="title">Phone</h2>
            <h3 class="category">Showcase</h3>
          </figcaption>
          <span class="img-content-hover">
            <h2 class="title">Phone</h2>
            <h3 class="category">Showcase</h3>
          </span>
        </figure>
      </div>
      <div class="column-xs-12 column-md-6">
        <figure class="img-container">
          <img src="https://source.unsplash.com/-RBuQ2PK_L8" />
          <figcaption class="img-content">
            <h2 class="title">Keyboard</h2>
            <h3 class="category">Showcase</h3>
          </figcaption>
          <span class="img-content-hover">
            <h2 class="title">Keyboard</h2>
            <h3 class="category">Showcase</h3>
          </span>
        </figure>
      </div>
      <div class="column-xs-12">
        <figure class="img-container">
          <img src="https://source.unsplash.com/P44RIGl9V54" />
          <figcaption class="img-content">
            <h2 class="title">Wrist Watch</h2>
            <h3 class="category">Showcase</h3>
          </figcaption>
          <span class="img-content-hover">
            <h2 class="title">Wrist Watch</h2>
            <h3 class="category">Showcase</h3>
          </span>
        </figure>
      </div>
    </div>
  </div>
</section>
<footer>
  <div class="container">
    <div class="grid">
      <div class="column-xs-12">
        <ul class="social">
          <li><a href="https://twitter.com/kato_katherine" target="_blank" rel="noopener noreferrer"><span class="fab fa-twitter"></span></a></li>
          <li><a href="https://codepen.io/kathykato" target="_blank" rel="noopener noreferrer"><span class="fab fa-codepen"></span></a></li>
          <li><a href="https://github.com/kathykato" target="_blank" rel="noopener noreferrer"><span class="fab fa-github"></span></a></li>
        </ul>
        <p class="copyright">&copy; Copyright 2018 Katherine Kato</p>
      </div>
    </div>
  </div>
</footer>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
const imgContent = document.querySelectorAll('.img-content-hover');

function showImgContent(e) {
  for (var i = 0; i < imgContent.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    x = e.pageX;
    y = e.pageY;
    imgContent[i].style.transform = `translate3d(${x}px, ${y}px, 0)`;
  }window.CP.exitedLoop(0);
};

document.addEventListener('mousemove', showImgContent);
    </script>
</body>
</html>

6. By Jack Cohle

Made by Jack Cohle. Carousel gallery (responsive). Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="//cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<style>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.title {
  margin-top: 50px;
}
.title h1 {
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: Arial;
  text-transform: uppercase;
  color: #d63031;
}
.title h1 span {
  display: block;
  color: #300a0a;
  font-size: 20px;
  margin-bottom: 10px;
}

/*Carousel Gallery*/
.carousel-gallery {
  margin: 50px 0;
  padding: 0 30px;
}
.carousel-gallery .swiper-slide a {
  display: block;
  width: 100%;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
}
.carousel-gallery .swiper-slide a:hover .image .overlay {
  opacity: 1;
}
.carousel-gallery .swiper-slide a .image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}
.carousel-gallery .swiper-slide a .image .overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(20, 20, 20, 0.8);
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.carousel-gallery .swiper-slide a .image .overlay em {
  color: #fff;
  font-size: 26px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
}
.carousel-gallery .swiper-pagination {
  position: relative;
  bottom: auto;
  text-align: center;
  margin-top: 25px;
}
.carousel-gallery .swiper-pagination .swiper-pagination-bullet {
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.carousel-gallery .swiper-pagination .swiper-pagination-bullet:hover {
  opacity: 0.7;
}
.carousel-gallery .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #d63031;
  transform: scale(1.1, 1.1);
}

/*# Carousel Gallery*/
.plugins {
  text-align: center;
}
.plugins h3 {
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: Arial;
  text-transform: uppercase;
  color: #111;
}
.plugins a {
  display: inline-block;
  font-family: Arial;
  color: #777;
  font-size: 14px;
  margin: 10px;
  transition: all 0.2s linear;
}
.plugins a:hover {
  color: #d63031;
}
</style>
</head>
<body>
  <div class="title">
  <h1><span>Responsive</span> Carousel Gallery</h1>
</div>

<!--Carousel Gallery-->
<div class="carousel-gallery">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="https://images.pexels.com/photos/48794/boy-walking-teddy-bear-child-48794.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-fancybox="gallery">
                    <div class="image" style="background-image: url(https://images.pexels.com/photos/48794/boy-walking-teddy-bear-child-48794.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)">
                        <div class="overlay">
                            <em class="mdi mdi-magnify-plus"></em>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="https://images.pexels.com/photos/248280/pexels-photo-248280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-fancybox="gallery">
                    <div class="image" style="background-image: url(https://images.pexels.com/photos/248280/pexels-photo-248280.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)">
                        <div class="overlay">
                            <em class="mdi mdi-magnify-plus"></em>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="https://images.pexels.com/photos/89095/pexels-photo-89095.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-fancybox="gallery">
                    <div class="image" style="background-image: url(https://images.pexels.com/photos/89095/pexels-photo-89095.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)">
                        <div class="overlay">
                            <em class="mdi mdi-magnify-plus"></em>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="https://images.pexels.com/photos/669319/pexels-photo-669319.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-fancybox="gallery">
                    <div class="image" style="background-image: url(https://images.pexels.com/photos/669319/pexels-photo-669319.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)">
                        <div class="overlay">
                            <em class="mdi mdi-magnify-plus"></em>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="https://images.pexels.com/photos/277477/pexels-photo-277477.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-fancybox="gallery">
                    <div class="image" style="background-image: url(https://images.pexels.com/photos/277477/pexels-photo-277477.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)">
                        <div class="overlay">
                            <em class="mdi mdi-magnify-plus"></em>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="https://images.pexels.com/photos/928276/pexels-photo-928276.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-fancybox="gallery">
                    <div class="image" style="background-image: url(https://images.pexels.com/photos/928276/pexels-photo-928276.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)">
                        <div class="overlay">
                            <em class="mdi mdi-magnify-plus"></em>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<!--#Carousel Gallery-->

<div class="plugins">
  <h3>Plugins</h3>
  
  <a href="http://idangero.us/swiper/" target="_blank">Swiper Slide</a>
  <a href="https://fancyapps.com/fancybox/3/" target="_blank">fancyBox3</a>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js'></script>
      <script>
$(function () {

  var swiper = new Swiper('.carousel-gallery .swiper-container', {
    effect: 'slide',
    speed: 900,
    slidesPerView: 5,
    spaceBetween: 20,
    simulateTouch: true,
    autoplay: {
      delay: 5000,
      stopOnLastSlide: false,
      disableOnInteraction: false },

    pagination: {
      el: '.carousel-gallery .swiper-pagination',
      clickable: true },

    breakpoints: {
      // when window width is <= 320px
      320: {
        slidesPerView: 1,
        spaceBetween: 5 },

      // when window width is <= 480px
      425: {
        slidesPerView: 2,
        spaceBetween: 10 },

      // when window width is <= 640px
      768: {
        slidesPerView: 3,
        spaceBetween: 20 } } });
});
    </script>
</body>
</html>

7. By Dipen Chauhan

Made by Dipen Chauhan. Responsive Image Gallery with Photoswipe. Source

JavaScript Gallery by Dipen Chauhan
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
#Gallery {
  margin-top: 30px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.gallery-item { 
  float: left;
  position: relative;
  width: 20%;
  padding-bottom: 14%;
}
.gallery-item a {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  overflow: hidden;
}
.gallery-item a img {
  width: 100%;
}

@media only screen and (max-width:480px) { 
    /* Smartphone view: 1 tile */
    .gallery-item {
        width: 100%;
        padding-bottom: 100%;
    }
}
@media only screen and (max-width:650px) and (min-width:481px) { 
    /* Tablet view: 2 tiles */
    .gallery-item {
        width: 50%;
        padding-bottom: 33.3%;
    }
}
@media only screen and (max-width:1050px) and (min-width:651px) { 
    /* Small desktop / ipad view: 3 tiles */
    .gallery-item {
        width: 33.3%;
        padding-bottom: 23%;
    }
}
@media only screen and (max-width:1290px) and (min-width:1051px) { 
    /* Medium desktop: 4 tiles */
    .gallery-item {
        width: 25%;
        padding-bottom: 17%;
    }
}



/* Directly from:
http://photoswipe.com/latest/photoswipe.css
*/
body.ps-active 
{
	-webkit-text-size-adjust: none;
}
body.ps-active * 
{ 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}
body.ps-active *:focus 
{ 
	outline: 0; 
}


/* Document overlay */
div.ps-document-overlay 
{
	background: #000;
}


/* Viewport */
div.ps-viewport 
{
	background: #000;
	cursor: pointer;
}


/* Zoom/pan/rotate layer */
div.ps-zoom-pan-rotate{
	background: #000;
}


/* Slider */
div.ps-slider-item-loading 
{ 
	background: url(http://abvichico.com/images/photoswipe/photoswipe-loader.gif) no-repeat center center; 
}


/* Caption */
div.ps-caption
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-bottom: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
}

div.ps-caption-bottom
{ 
	border-top: 1px solid #42403f;
	border-bottom: none;
}

div.ps-caption-content
{
	padding: 13px;
}


/* Toolbar */
div.ps-toolbar
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-top: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

/* Hi-res retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-webkit-background-size: 176px 88px;
		background-image: url(http://abvichico.com/images/photoswipe/[email protected]);
	}
}
</style>
</head>
<body>
  <div id="Gallery">
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Exterior2.jpg"><img src="http://abvichico.com/images/thumb/Exterior2.jpg" alt="Exterior"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Lobby1.jpg"><img src="http://abvichico.com/images/thumb/Lobby1.jpg" alt="Lobby"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Guest%20Room2.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room2.jpg" alt="Guest Room"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Guest%20Room4.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room4.jpg" alt="Guest Room"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Guest%20Room6.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room6.jpg" alt="Guest Room"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Guest%20Room8.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room8.jpg" alt="Guest Room"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Guest%20Room9.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room9.jpg" alt="Guest Room"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Guest%20Room5.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Room5.jpg" alt="Guest Room"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Guest%20Bathroom2.jpg"><img src="http://abvichico.com/images/thumb/Guest%20Bathroom2.jpg" alt="Guest Bathroom"/></a>
  </div>
  <div class="gallery-item">
    <a href="http://abvichico.com/images/full/Pool3.jpg"><img src="http://abvichico.com/images/thumb/Pool3.jpg" alt="Pool"/></a>
  </div>
</div><!--end #Gallery-->
  <script src="https://abvichico.com/js/simple-inheritance.min.js"></script>
<script src="https://abvichico.com/js/code-photoswipe-1.0.11.min.js"></script>
      <script>
document.addEventListener('DOMContentLoaded', function () {
  Code.photoSwipe('a', '#Gallery', { captionAndToolbarHideOnSwipe: false });
}, false);
    </script>
</body>
</html>

8. By Stan

Made by Stan. Lightbox gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
body {
  background-color: #3bb2b8;
  background: linear-gradient(
    25deg,
    rgba(66, 230, 149, 1),
    rgba(66, 32, 149, 1)
  );
  background-repeat: no-repeat;
  height: 100vh;
  font-family: "Open Sans", sans-serif;
}
.container {
  max-width: 800px;
  margin: 5% auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
}

.text-center {
  text-align: center;
  margin-bottom: 1em;
}

.lightbox-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.lightbox-gallery div > img {
  max-width: 100%;
  display: block;
}

.lightbox-gallery div {
  margin: 10px;
  flex-basis: 180px;
}

@media only screen and (max-width: 480px) {
  .lightbox-gallery {
    flex-direction: column;
    align-items: center;
  }

  .lightbox > div {
    margin-bottom: 10px;
  }
}

/*Lighbox CSS*/

.lightbox {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  padding-top: 30px;
  box-sizing: border-box;
}

.lightbox img {
  display: block;
  margin: auto;
}

.lightbox .caption {
  margin: 15px auto;
  width: 50%;
  text-align: center;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 700;
  color: #eee;
}

.github-link {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
}

.github-link:hover,
.github-link:active,
.github-link:visited {
  color: #fff;
  text-decoration: none;
}
</style>
</head>
<body>
  <div class="container">
		<h2 class="text-center">Lightbox Gallery</h2>
		<div class="lightbox-gallery">
				<div><img src="https://picsum.photos/id/343/300/300" data-image-hd="https://picsum.photos/id/343/600/600" alt=""></div>
				<div><img src="https://picsum.photos/id/112/300/300" data-image-hd="https://picsum.photos/id/112/600/600" alt=""></div>
				<div><img src="https://picsum.photos/id/155/300/300" data-image-hd="https://picsum.photos/id/155/600/600" alt=""></div>
				<div><img src="https://picsum.photos/id/11/300/300" data-image-hd="https://picsum.photos/id/11/600/600" alt=""></div>
				<div><img src="https://picsum.photos/id/434/300/300" data-image-hd="https://picsum.photos/id/434/600/600" alt=""></div>
				<div><img src="https://picsum.photos/id/101/300/300" data-image-hd="https://picsum.photos/id/101/600/600" alt=""></div>
		</div>
	</div>
<div class="text-center github-link">
  <a class="github-link" href="https://github.com/humbl3man/lightboxify" target="_blank"><i class="fa fa-github"></i> Github Source Code</a>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// Create a lightbox
(function () {
  var $lightbox = $("<div class='lightbox'></div>");
  var $img = $("<img>");
  var $caption = $("<p class='caption'></p>");

  // Add image and caption to lightbox

  $lightbox.
  append($img).
  append($caption);

  // Add lighbox to document

  $('body').append($lightbox);

  $('.lightbox-gallery img').click(function (e) {
    e.preventDefault();

    // Get image link and description
    var src = $(this).attr("data-image-hd");
    var cap = $(this).attr("alt");

    // Add data to lighbox

    $img.attr('src', src);
    $caption.text(cap);

    // Show lightbox

    $lightbox.fadeIn('fast');

    $lightbox.click(function () {
      $lightbox.fadeOut('fast');
    });
  });

})();
    </script>
</body>
</html>

9. By Maulik Darji

Made by Maulik Darji. Responsive Image Gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<style>
h1{
  font-family: Satisfy;
  font-size:50px;
  text-align:center;
  color:black;
  padding:1%;
}
#gallery{
  -webkit-column-count:4;
  -moz-column-count:4;
  column-count:4;
  
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
@media (max-width:1200px){
  #gallery{
  -webkit-column-count:3;
  -moz-column-count:3;
  column-count:3;
    
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
}
@media (max-width:800px){
  #gallery{
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
    
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
}
@media (max-width:600px){
  #gallery{
  -webkit-column-count:1;
  -moz-column-count:1;
  column-count:1;
}  
}
#gallery img,#gallery video {
  width:100%;
  height:auto;
  margin: 4% auto;
  box-shadow:-3px 5px 15px #000;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.modal-img,.model-vid{
  width:100%;
  height:auto;
}
.modal-body{
  padding:0px;
}
</style>
</head>
<body>
<hr>
<div id="gallery" class="container-fluid">  
  <img src="https://source.unsplash.com/1600x1200?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/1024x768?female,portrait" class="img-responsive">
   <img src="https://source.unsplash.com/1366x768?female,portrait" class="img-responsive">
  <video class="vid" controls>
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    </source>
  </video>
  <img src="https://source.unsplash.com/1920x1080?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/640x360?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/320x640?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/1200x1600?female,portrait" class="card img-responsive">
  <img src="https://source.unsplash.com/800x600?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/600x800?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/400x600?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/600x400?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/1100x1600?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/1600x1100?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/992x768?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/768x992?female,portrait" class="img-responsive">

</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
      </div>
    </div>

  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
      <script>
$(document).ready(function () {
  $("img").click(function () {
    var t = $(this).attr("src");
    $(".modal-body").html("<img src='" + t + "' class='modal-img'>");
    $("#myModal").modal();
  });

  $("video").click(function () {
    var v = $("video > source");
    var t = v.attr("src");
    $(".modal-body").html("<video class='model-vid' controls><source src='" + t + "' type='video/mp4'></source></video>");
    $("#myModal").modal();
  });
});
    </script>
</body>
</html>

10. By Aleh Isakau

Made by Aleh Isakau. Flip image gallery with content. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import "https://fonts.googleapis.com/css?family=Open+Sans";

html {
  height: 100%;
}
body {
  background: #181818;
  color: #F0F3F4;
  font: normal 16px/1.25 'Open Sans';
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
.container {
  height: 100%;
}
.gallery {
  list-style-type: none;
  height: 100%;
  overflow: hidden;
}
.gallery li {
  float: left;
  height: 100%;
  width: 400px;
  background: #2E4053;
}
.gallery .flip {
  height: 100%;
  width: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  perspective: 2000px;
}
.gallery li:hover .front-side {
  opacity: 0;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.gallery li:hover .back-side {
  background: #000;
  opacity: 1;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.gallery .front-side,
.gallery .back-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility:  hidden;
  -moz-backface-visibility:  hidden;
  backface-visibility:  hidden;

  -webkit-transition: transform 0.4s ease-out, opacity 0.3s ease-out;
  -moz-transition: transform 0.4s ease-out, opacity 0.3s ease-out;
  transition: transform 0.4s ease-out, opacity 0.3s ease-out;
}
.gallery .front-side {
  opacity: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;

  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.gallery .back-side {
  opacity: 0;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.gallery .back-side > a {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery li:nth-child(1) .front-side {
  background-image:url('http://pre12.deviantart.net/f04f/th/pre/i/2015/281/c/e/virtus_pro_tribute_by_haryarti-d9cdvwy.jpg');
}
.gallery li:nth-child(1) .loader {
  border-top-color: #F39C12;
  border-left-color: #F39C12;
}
.gallery li:nth-child(1) .text h3 {
  color: #F39C12;
}
.gallery li:nth-child(1) .text h3:after {
  background: #F5B041;
}

.gallery li:nth-child(2) .front-side {
  background-image: url('http://pre06.deviantart.net/f121/th/pre/i/2014/280/7/a/crystal_maiden_by_haryarti-d81xgfl.jpg');
}

.gallery li:nth-child(3) .front-side {
  background-image: url('http://pre10.deviantart.net/3566/th/pre/i/2014/289/5/a/drow_ranger_by_haryarti-d83292f.jpg');
}
.gallery li:nth-child(3) .loader {
  border-top-color: #424949;
  border-left-color: #424949;
}
.gallery li:nth-child(3) .text h3 {
  color: #424949;
}
.gallery li:nth-child(3) .text h3:after {
  background: #515A5A;
}

.gallery li:nth-child(4) .front-side {
  background-image: url('http://pre01.deviantart.net/c319/th/pre/i/2014/322/e/a/windrunner_by_haryarti-d86ubud.jpg');
}
.gallery li:nth-child(4) .loader {
  border-top-color: #F1C40F;
  border-left-color: #F1C40F;
}
.gallery li:nth-child(4) .text h3 {
  color: #F1C40F;
}
.gallery li:nth-child(4) .text h3:after {
  background: #F7DC6F;
}

.gallery li:nth-child(5) .front-side {
  background-image: url('http://pre04.deviantart.net/5815/th/pre/f/2014/149/7/7/death_prophet_from_dota_2_by_o_l_i_v_i-d7k2ekl.jpg');
}
.gallery li:nth-child(5) .loader {
  border-top-color: #1ABC9C;
  border-left-color: #1ABC9C;
}
.gallery li:nth-child(5) .text h3 {
  color: #1ABC9C;
}
.gallery li:nth-child(5) .text h3:after {
  background: #48C9B0;
}

.gallery li:nth-child(6) .front-side {
  background-image: url('http://pre02.deviantart.net/ce96/th/pre/i/2015/177/7/7/katarina_by_haryarti-d8ytd5o.jpg');
}
.gallery li:nth-child(6) .loader {
  border-top-color: #E74C3C;
  border-left-color: #E74C3C;
}
.gallery li:nth-child(6) .text h3 {
  color: #E74C3C;
}
.gallery li:nth-child(6) .text h3:after {
  background: #EC7063;
}

.gallery li:nth-child(7) .front-side {
  background-image: url('http://pre10.deviantart.net/cbaf/th/pre/i/2015/047/0/2/vengeful_spirit_by_haryarti-d8iau4i.png');
}
.gallery li:nth-child(7) .loader {
  border-top-color: #8E44AD;
  border-left-color: #8E44AD;
}
.gallery li:nth-child(7) .text h3 {
  color: #8E44AD;
}
.gallery li:nth-child(7) .text h3:after {
  background: #A569BD;
}

.gallery li:nth-child(8) .front-side {
  background-image: url('http://pre06.deviantart.net/73a2/th/pre/i/2014/080/5/7/lina_by_haryarti-d7b48eu.jpg');
}
.gallery li:nth-child(8) .loader {
  border-top-color: #F39C12;
  border-left-color: #F39C12;
}
.gallery li:nth-child(8) .text h3 {
  color: #F39C12;
}
.gallery li:nth-child(8) .text h3:after {
  background: #F5B041;
}

.gallery .content {
  text-align: center;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 25px 20px;
}

.gallery li:hover .text {
  opacity: 1;
  visibility: visible;
  max-height: 2000px;
  -webkit-transition: opacity .3s ease-in 1.5s, max-height .1s ease 1.5s;
  -moz-transition: opacity .3s ease-in 1.5s, max-height .1s ease 1.5s;
  transition: opacity .3s ease-in 1.5s, max-height .1s ease 1.5s;
}
.gallery li:hover .loader {
  opacity: 1;
  visibility: visible;
  -webkit-animation: hide .1s ease-in-out 1.4s forwards, load .75s infinite;
  -moz-animation: hide .1s ease-in-out 1.4s forwards, load .75s infinite;
  animation: hide .1s ease-in-out 1.4s forwards, load .75s infinite;
}
.gallery .text {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
}
.gallery .content h3 {
  position: relative;
  color: #3498DB;
  font: normal 30px/1.25 'Open Sans';
  margin-bottom: 25px;
}
.gallery .content h3:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 3px;
  bottom: -10px;
  left: 50%;
  margin-left: -25px;
  background: #85C1E9;
}
.gallery .content p {
  margin: 10px 0;
  color: #D6DBDF;
  font: normal 16px/1.25 'Open Sans';
}
.gallery .loader {
  opacity: 0;
  visibility: hidden;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #3498DB;
  border-left-color: #3498DB;
}

@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes load {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes hide {
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
@-moz-keyframes hide {
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
@keyframes hide {
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
</style>
</head>
<body>
<div class="container">
  <ul class="gallery">
    <li>
      <div class="flip">
        <div class="front-side"></div>
        <div class="back-side">
          <a href="#">
            <div class="content">
              <div class="loader"></div>
              <div class="text">
                <h3>LINA</h3>
                <p>Text</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li>
      <div class="flip">
        <div class="front-side"></div>
        <div class="back-side">
          <a href="#">
            <div class="content">
              <div class="loader"></div>
              <div class="text">
                <h3>CRYSTAL MAIDEN</h3>
                <p>Text</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li>
      <div class="flip">
        <div class="front-side"></div>
        <div class="back-side">
          <a href="#">
            <div class="content">
              <div class="loader"></div>
              <div class="text">
                <h3>DROW RANGER</h3>
                <p>Text</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li>
      <div class="flip">
        <div class="front-side"></div>
        <div class="back-side">
          <a href="#">
            <div class="content">
              <div class="loader"></div>
              <div class="text">
                <h3>WINDRANGER</h3>
                <p>Text</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li>
      <div class="flip">
        <div class="front-side"></div>
        <div class="back-side">
          <a href="#">
            <div class="content">
              <div class="loader"></div>
              <div class="text">
                <h3>DEATH PROPHET</h3>
                <p>Text</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li>
      <div class="flip">
        <div class="front-side"></div>
        <div class="back-side">
          <a href="#">
            <div class="content">
              <div class="loader"></div>
              <div class="text">
                <h3>KATARINA</h3>
                <p>Text</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li>
      <div class="flip">
        <div class="front-side"></div>
        <div class="back-side">
          <a href="#">
            <div class="content">
              <div class="loader"></div>
              <div class="text">
                <h3>VENGEFUL SPIRIT</h3>
                <p>Text</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li>
      <div class="flip">
        <div class="front-side"></div>
        <div class="back-side">
          <a href="#">
            <div class="content">
              <div class="loader"></div>
              <div class="text">
                <h3>LINA</h3>
                <p>Text</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
  </ul>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js'></script>
      <script>
var Gallery = function () {
  var colors = ['#34495E', '#2E4053', '#283747', '#212F3C', '#1B2631', '#2C3E50', '#273746'];
  var scrollTimeId;
  var posLeft = 0;

  function Gallery(config) {
    this.list = $(config.list);
    this.items = this.list.find('li');
    this.itemWidth = this.items.outerWidth();
  };

  Gallery.prototype = {
    constructor: Gallery,

    init: function () {
      this.setGalleryWidth();
      this.setItemsColor();
      this.eventManager();

      return this;
    },

    eventManager: function () {
      var _this = this;

      $("html, body").on('mousewheel', function (event) {
        clearTimeout(scrollTimeId);
        scrollTimeId = setTimeout(onScrollEventHandler.bind(this, event, _this.itemWidth), 0);
      });
    },

    getRandomColor: function () {
      return colors[Math.floor(Math.random() * colors.length)];
    },

    setItemsColor: function () {
      var _this = this;

      $.each(this.items, function (index, item) {
        item.style.backgroundColor = _this.getRandomColor();
      });
    },

    setGalleryWidth: function () {
      this.list.css('width', this.getGalleryWidth());
    },

    getGalleryWidth: function () {
      var width = 0;

      this.items.each(function (index, item) {
        width += $(this).outerWidth();
      });

      return width;
    } };


  function onScrollEventHandler(event, width) {
    if (event.deltaY > 0) {
      this.scrollLeft -= width / 2;
    } else {
      this.scrollLeft += width / 2;
    }
    event.preventDefault();
  };

  return Gallery;
}();


$(document).ready(function () {
  var gallery = new Gallery({
    list: '.gallery' }).
  init();
});
    </script>
</body>
</html>
 

11. By Dudley Storey

Made by Dudley Storey. Quad Image Gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body { 
  font-family: Avenir, sans-serif; margin: 0; 
  background-color: #121;
}
div#quad { 
  background-color: #000; 
  font-size: 0; width: 60%; 
  margin: 0 auto;
  box-shadow: 0 0 12px rgba(0,0,0,0.8);
}
div#quad figure { 
  margin: 0; width: 50%; 
  height: auto; transition: 1s; 
  display: inline-block; 
  position: relative; overflow: hidden; 
}
div#quad figure:hover { cursor: pointer; z-index: 4; }
div#quad figure img { width: 100%; height: auto; }
div#quad figure:nth-child(1) { transform-origin: top left; }
div#quad figure:nth-child(2) { transform-origin: top right; }
div#quad figure:nth-child(3) { transform-origin: bottom left; }
div#quad figure:nth-child(4) { transform-origin: bottom right; }
div#quad figure figcaption { 
  margin: 0; opacity: 0; 
  background: rgba(0,0,0,0.3); 
  color: #fff; padding: .3rem; 
  font-size: 1.2rem; 
  position: absolute; 
  bottom: 0; width: 100%;
	transition: 1s 1s opacity; 
}
.expanded { transform: scale(2); z-index: 5;  }
div#quad figure.expanded figcaption { opacity: 1; }
div.full figure:not(.expanded) { pointer-events: none; }
</style>
</head>
<body>
  <div id="quad">
  <figure>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rose-red-wine.jpg" alt="rose-red-wine">
  <figcaption>Rose Red Wine</figcaption>
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/green-glass-bottle.jpg" alt>
    <figcaption>Green Glass Bottle</figcaption>
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/guinness-barrels.jpg" alt>
    <figcaption>Guinness Barrels, Dublin</figcaption>
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/crystal-skull-vodka.jpg" alt>
    <figcaption>Crystal Skull Vodka</figcaption>
  </figure>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var quadimages = document.querySelectorAll("#quad figure");
for (i = 0; i < quadimages.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  quadimages[i].addEventListener('click', function () {this.classList.toggle("expanded");quad.classList.toggle("full");});
}window.CP.exitedLoop(0);
    </script>
</body>
</html>