CodePen

HTML

            
              <ul>
  <li><img src="http://goo.gl/BvCy7" id="puppies" alt="puppies"/></li>
  <li><img src="http://goo.gl/abTYj" id="kittens" alt="kittens"/></li>
  <li><img src="http://goo.gl/qXyUY" id="aardvark" alt="aardvark"/></li>
</ul>

<div>Click on the picture for description.</div>
            
          
!
via HTML Inspector

CSS

            
              * { margin:0;padding:0; }
body { background:#E9EEF5; }

ul {
  list-style-type:none;
  height:202px;
  width:674px;
  margin:10px auto 0;
}

li {
  height:200px;
  width:200px;
  margin:0 10px;
  border:1px solid #222;
  display:inline-block;
}

div {
  font:20pt 'Georgia';
  height:50px;
  width:674px;
  margin:20px auto 0;
  text-align:center;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#puppies').click(function() {
  $('div').html('Puppies');
});

$('#kittens').click(function() {
  $('div').html('Kittens');
});


$('#aardvark').click(function() {
  $('div').html('Aardvark');
});
  
/** --OR-- you could get the images alt attribute and print that out 

$('#aardvark').click(function() {
  var alt = $(this).attr('alt');
  $('div').html(alt);
});
**/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................