Masonry Gallery

index.html

<section class="container-fluid gallery bg-faded">
  <header>
    <h1 class="text-center">Masonry Gallery</h1>
  </header>
  <div class="grid">
    <a href="#" class="grid__item grid__sizer">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-1.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item grid__item--high">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-2.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-3.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item grid__item--high">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-43eec3.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-5.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-6.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-7.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-8.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item grid__item--high">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-9.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-10.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-11.jpg" alt="Credits to Unsplash.com" />
    </a>
    <a href="#" class="grid__item">
      <div class="item__overlay">
        <button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
      </div>
      <img src="http://ultraimg.com/images/photo-12.jpg" alt="Credits to Unsplash.com" />
    </a>
  </div>
</section>
<!-- Modal -->
<div id="modalPicture" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalPictureLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- Modal - header -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span class="fa fa-times" aria-hidden="true"></span>
          <span class="sr-only">Close</span>
        </button>
      </div><!-- .end Modal - header -->
      <!-- Modal - body -->
      <div class="modal-body">
        <img class="js-modal-image" src="" alt="Credits to Unsplash.com" />
      </div><!-- .end Modal - body -->
      <!-- Modal - footer -->
      <div class="modal-footer">
        <a class="js-download m-r" href="#" aria-label="Download" download>
          <span class="fa fa-download" aria-hidden="true"></span>
          <span class="sr-only">Download</span>
        </a>
        <a class="js-heart m-r" href="#" aria-label="Like">
          <span class="fa fa-heart" aria-hidden="true"></span>
          <span class="sr-only">Like</span>
        </a>
        <a class="m-r" href="https://twitter.com/home?status=%40alexdevero%20" target="_blank" aria-label="Comment">
          <span class="fa fa-comment" aria-hidden="true"></span>
          <span class="sr-only">Comment</span>
        </a>
        <a href="https://twitter.com/home?status=Check%20out%20this%20Mansory%20Gallery%20tutorial%20on%20http%3A//blog.alexdevero.com/%20%23design%20%23webdesign" target="_blank" aria-label="Share">
          <span class="fa fa-twitter" aria-hidden="true"></span>
          <span class="sr-only">Tweet it</span>
        </a>
      </div><!-- .end Modal - footer -->
    </div>
  </div>
</div>
<!-- .end modal -->

masonry-gallery.markdown

Masonry Gallery

Demo for Masonry Gallery tutorial on blog.alexdevero.com

A Pen by Alex Devero on CodePen.

License.

script.js

(function() {
  // Masonry grid setup
  $(".grid").masonry({
    itemSelector: ".grid__item",
    columnWidth: ".grid__sizer",
    gutter: 15,
    percentPosition: true
  });
  // Image replacement handler
  $(document).on("click", ".js-button", function() {
    var imageSrc = $(this).parents(".grid__item").find("img").attr("src");
    $(".js-download").attr("href", imageSrc);
    $(".js-modal-image").attr("src", imageSrc);
    $(document).on("click", ".js-heart", function() {
      $(this).toggleClass("active");
    });
  });
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

style.scss

// Remy function
@function remy($value) {
  @return ($value / 16px) *1rem;
}
/**
 * Base styles
 */
body {
  font: 100% / 1.414 "Poiret One", "Roboto", sans-serif;
}
/**
 * Layout styles
 */
header {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/**
 * Button component
 */
.btn {
  position: relative;
  top: 0;
  margin-top: 50%;
  opacity: 0;
  font-size: 1rem;
  color: #fff;
  border-radius: remy(35px);
  transform: translateY(-50%);
  transition: all .25s ease-in-out;
  &:focus,
  &:hover {
    color: #111;
    background-color: #fff;
    border-color: #fff;
  }
}
/**
 * Grid styles
 */
.item__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(#111, .45);
  transition: background-color .55s ease-in-out;
  &:focus,
  &:hover {background-color: rgba(#111, .05);}
  &:focus > button,
  &:hover > button {opacity: 1;}
}
.grid__sizer,
.grid__item {
  position: relative;
  width: 19.35%;
  min-width: remy(260px);
}
.grid__item {
  margin-bottom: .9375rem;
  border-radius: remy(4px);
  overflow: hidden;
}
.grid__item--high,
.grid__item--high img {height: remy(480px);}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
/**
 * Link styles
 */
a,
.fa {
  color: #bbb;
  transition: color .25s ease-in-out;
  &:focus,
  &:hover {
    text-decoration: none;
    color: #666;
  }
}
.active .fa {color: #f62459;}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />