CodePen

HTML

            
              <div class="gallery">
    <div class="img">
        <a href="http://i1.wp.com/bochdewi.co.uk/bydbenjamin/wp-content/uploads/2012/12/Map-1789.jpg">
          <img src="http://i1.wp.com/bochdewi.co.uk/bydbenjamin/wp-content/uploads/2012/12/Map-1789.jpg" alt="" />
      </a>
  </div>
  <div class="img">
        <a href="http://i2.wp.com/bochdewi.co.uk/bydbenjamin/wp-content/uploads/2012/12/Map-2012.jpg">
          <img src="http://i2.wp.com/bochdewi.co.uk/bydbenjamin/wp-content/uploads/2012/12/Map-2012.jpg" alt="" />
      </a>
  </div>
</div>
            
          
!
via HTML Inspector

CSS

            
              .gallery .img a img {
    width: 150px;
    height: 150px;
}
.gallery .img {
    margin: 10px;
    border: 3px solid #555;
    float: left;
    transition: 0.5s all ease;
    box-shadow:  0 0 5px #000;
}
.gallery .img:hover {
    border-width: 10px;
    position: relative;
    top: -7px;
    left: -7px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
		$('.gallery a').lightBox();
	});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................