<div id="overlay"></div>
<div id="container">
  <div class="photo"><img src="https://s.cdpn.io/37045/wedding-1.jpg" alt="" class="photo-image" /></div>
  <div class="photo"><img src="https://s.cdpn.io/37045/wedding-2.jpg" alt="" class="photo-image" /></div>
  <div class="photo"><img src="https://s.cdpn.io/37045/wedding-3.jpg" alt="" class="photo-image" /></div>
  <div class="photo"><img src="https://s.cdpn.io/37045/wedding-4.jpg" alt="" class="photo-image" /></div>
  <div class="photo"><img src="https://s.cdpn.io/37045/wedding-5.jpg" alt="" class="photo-image" /></div>
  <div class="photo"><img src="https://s.cdpn.io/37045/wedding-6.jpg" alt="" class="photo-image" /></div>
</div>

#container{
  width:450px;
  position:relative;
  margin:0 auto;
  top:50px;
}

#overlay{
  cursor: pointer;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:#000;
  opacity:.7;
  z-index:2000;
  display:none;
}

.photo{
  position:relative;
  float:left;
  height:100px;
  width:100px;
  background:#fff;
  border:1px solid #999;
  margin:20px;
}

.photo-image{
  cursor: pointer;
  position:relative;
  top:9px;
  left:9px;
  width:80px;
  border:1px solid #999;  
  z-index:1000;
  opacity:0.6;
  transition: width 1s, top 1s, left 1s, opacity 1s, z-index .01s;
}

.photo-image:hover{
  width:200px;
  top:-50px;
  left:-50px;
  z-index:1001;
  opacity:1;
}

.photo-selected{
  cursor:default;
  z-index:2001;
  width:500px;
  opacity:1;
  top:-20px;
  left:-200px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Nov 11 2013 - Added "X" to close popup - just a visual cue */
/*.photo-x:after{
  content: "X";
  font-family: arial;
  position: relative;
  top: -535px;
  font-weight: bold;
  left: 285px;
  padding: 10px 14px;
  border: 2px solid black;
  background: white;
  z-index: 9999;
  cursor: pointer;
}*/

.photo-selected:hover{
  width:500px;
  top:-50px;
  left:-50px;
  z-index:2001;
  opacity:1;
  top:-20px;
  left:-200px;
}

/* Photography by Hilary Spencer Creative Photography */
/* ************************************************** */

/* https://www.facebook.com/pages/Hilary-Spencer-Creative-Photography/107123415116 */

// Hovering an image gives a smooth enlarge effect
// Clicking an image will enlarge it even more, and add an overlay
// Clicking the overlay will exit the overlay
// You can also hit "esc" to exit the full view

// Added an on click event to make it more like a production environment, though the primary function is the hover effect
// When the page has loaded
$(function() {
  // View the selected photo at full size
  $(".photo-image").click(function(){
    $(this).addClass("photo-selected");
    $(this).parent().addClass("photo-x");
    $("#overlay").show();
  });
  
  // Close the full size view when #overlay is clicked
  $("#overlay").click(function(){
    $(".photo-image").removeClass("photo-selected");
    $(".photo-x").removeClass("photo-x");
    $("#overlay").hide();
  });
});

// Close full size view if "esc"
$(document).keyup(function(e) {
  if (e.keyCode == 27) {
    $(".photo-image").removeClass("photo-selected");
    $("#overlay").hide();
  }
});