<div class="gallery">
  <a href="https://assets.codepen.io/3/mz1.jpg">
    <img src="https://assets.codepen.io/3/mz1_m.jpg" alt="" />
  </a>
  <a href="https://assets.codepen.io/3/mz2.jpg">
    <img src="https://assets.codepen.io/3/mz2_m.jpg" alt="" />
  </a>
  <a href="https://assets.codepen.io/3/mz3.jpg">
    <img src="https://assets.codepen.io/3/mz3_m.jpg" alt="" />
  </a>
  <a href="https://assets.codepen.io/3/mz4.jpg">
    <img src="https://assets.codepen.io/3/mz4_m.jpg" alt="" />
  </a>
  <a href="https://assets.codepen.io/3/mz5.jpg">
    <img src="https://assets.codepen.io/3/mz5_m.jpg" alt="" />
  </a>
  <a href="https://assets.codepen.io/3/mz6.jpg">
    <img src="https://assets.codepen.io/3/mz6_m.jpg" alt="" />
  </a>
</div>

* {
  margin: 0;
  padding: 0;
}
body {
  font: 14px Georgia, serif;
}
#page-wrap {
  width: 760px;
  margin: 0 auto;
}
h1 {
  text-align: center;
  margin: 20px 0;
  font: 30px Georgia, Serif;
}
a img {
  border: 0;
}
.gallery a {
  width: 240px;
  height: 180px;
  display: block;
  float: left;
  margin: 0 20px 20px 0;
}
.gallery a:nth-child(3n) {
  margin-right: 0;
}
.gallery a img {
  -webkit-box-shadow: 0 0 10px #999;
  -moz-box-shadow: 0 0 10px #999;
}
.gallery a img:hover {
  -webkit-box-shadow: 0 0 10px #222;
  -moz-box-shadow: 0 0 10px #222;
}
.larger {
  position: absolute !important;
  z-index: 10001;
  -webkit-box-shadow: 0 0 35px #222;
  -moz-box-shadow: 0 0 35px #222;
}

$(function () {
  var $el;

  $(".gallery a").live("click", function () {
    $el = $(this);

    $("<img />", {
      src: $el.attr("href"),
      class: "larger"
    }).load(function () {
      $(this)
        .appendTo("body")
        .width($el.find("img").width())
        .position({
          of: $el.find("img"),
          my: "center center",
          at: "center center"
        })
        .animate(
          {
            width: 500
          },
          {
            duration: 1000,
            easing: "easeOutQuad",
            step: function (i) {
              $(this).position({
                of: $el.find("img"),
                my: "center center",
                at: "center center",
                collision: "fit"
              });
            }
          }
        );
    });

    return false;
  });

  $(".larger").live("click", function () {
    $el = $(this);
    $el.fadeOut(400, function () {
      $el.remove();
    });
  });
});