CodePen

HTML

            
              <div class="images">
  <img src="http://petliferadio.com/doggydog.jpg" >
  <img src="http://www.catchannel.com/images/cat-has-fever.jpg" >
  <img src="http://bioexpedition.com/wp-content/uploads/2012/04/Spider-Monkey-Infant.jpg" >
  <img src="http://theaveryonsouthwestern.myaptportal.com/files/2012/02/koala-dallas-300x300.png" >
  <img src="http://b.vimeocdn.com/ps/450/265/4502654_300.jpg" >
  <img src="http://www.lpzoo.org/sites/default/files/imagesfacts/lion300_0.jpg?1331759500" >
  <img src="http://showme.co.za/files/2011/10/Cheetah-Run-at-De-Wildt-Cheetah-Centre.jpg" >
  <img src="http://onewaypestcontrol.com/sites/default/files/images/pharaoh-ant.jpg" >
  <img src="http://www4.uwm.edu/fieldstation/naturalhistory/bugoftheweek/images/dragonflies5_300.jpg" >
  <img src="http://www.newsytype.com/wp-content/uploads/2011/09/Red-kangaroo.jpg" >
</div>

<div class="focus">
  <span class="close">&times;</span>
</div>
            
          
!
via HTML Inspector

CSS

            
              * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

body {
  background: #222;
}

.images {
  position: absolute;
  width: 640px;
  left: 50%;
  top: 50%;
  margin-top: -128px;
  margin-left: -320px;
}

.images img {
  cursor: pointer;
  float: left;
  padding: 3px;
  width: 128px;
  height: auto;
}


.focus {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  display: none;
  z-index: 10;
}

.focus .close {
  position: absolute;
  top: -14px;
  left: 0;
  font-size: 40px;
  cursor: pointer;
  color: #F50000;
}

.darken {
  opacity: 0.3;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.3); 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function(){
  var image = $('.images>img');
  var box = $('.focus');
  var close = $('.focus .close');
  var images = $('.images');
  
  image.on('click', function(){
    var $this = $(this);
    var src = $this.attr('src');
    box.find('img').remove();
    box.append('<img src=\"'+src+'\" />');
    box.fadeIn();
    images.addClass('darken');
    images.append('<div class="overlay">');
  });
  
  close.on('click', function(){
    box.css('display', 'none');
    images.removeClass('darken');
    $('.overlay').remove();
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................