Could someone kindly check out my code please? My caption is not showing up and I believe I followed every step of the video... Snapshot: https://w.trhou.se/hn6hu0gu3p

app.js

//Problem: User when clicking on image goes to a dead end

//Solution: Create an overlay with the large image - Lightbox

var $overlay = $("<div id = 'overlay'></div>");

var $image = $('<img>');

var $caption = $('<p></p>');

//Add image to overlay

$overlay.append($image);

// caption

$overlay.append($caption);

// Add overlay

$('body').append($overlay);

//Capture Click event on link around image

$('#imageGallery a').click(function(event){ event.preventDefault();

var imageLocation = $(this).attr('href');

// Update overlay with the image linked in the link

$image.attr('src', imageLocation);

//show overlay

$overlay.show();

//Get child's alt atribute and set caption

var captionText = $(this).children('img').attr('alt');

$overlay.text(captionText); });

//When overlay is clicked

$overlay.click(function(event){

//hide overlay

$overlay.hide(); });

style.css body { font-family: sans-serif; background: #384047; } h1 { color: #fff; text-align: center }

ul { list-style:none; margin: 0 auto; padding: 0; display: block; max-width: 780px; text-align: center; } ul li { display: inline-block; padding: 8px; background:white; margin:10px; } ul li img { display: block; } a { text-decoration: none; } /** Start Coding Here **/

overlay {

background:rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; left:0; top: 0; display: none; text-align: center; }

overlay img{

margin-top: 10%; }

overlay p {

color: white; }