CodePen

HTML

            
              <h1>Click on an image below to see it in the gray box!</h1>

<div class="images">
  <img src="http://static.ddmcdn.com/gif/bad-dog-training-behavior-300.jpg" data-info="A dog." />
  <img src="http://www.lpzoo.org/sites/default/files/imagesfacts/sand_cat.jpg?1331838394" data-info="A cat." />
  <img src="http://www.lpzoo.org/sites/default/files/imagesfacts/lion300_0.jpg?1331759500" data-info="A lion." />
  <img src="http://cdn.cutestpaw.com/wp-content/uploads/2012/06/s-Monkey-meal.jpeg" data-info="A monkey." />
</div>

<div class="loader">
  <div class="info"></div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

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

h1 {
  padding-left: 10px;
}

.images {
  float: left;
  width: 256px;
}

.images img {
  float: left;
  display: block;
  width: 100%;
  max-width: 128px;
  cursor: pointer;
  padding: 10px;
}

.loader {
  width: 300px;
  height: 300px;
  float: right;
  background: #ccc;
  margin-top: 10px;
  margin-right: 10px;
  position: relative;
}

.loader .info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.75);
  padding: 20px;
  color: white;
}

.loader img {
  display: block;
  width: 100%;
  max-width: 300px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
  var loader = $('.loader');
  var image = $('.images>img');
  
  image.on('click', function(){
    var src = $(this).attr('src');
    loader.find('img').remove();
    loader.append('<img src=\"'+src+'\" />');
    loader.find('.info').text($(this).attr('data-info'));
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................