Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 3

Posted by michael singh
michael singh
5,927 Points

problem with my code? - creating a simple lightbox part 3

here is my workspace - https://w.trhou.se/ezmuloz818

Not sure why my code is not working...

1 Answer

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Hi Michael,

Mutlipe things are wrong. You don't have the text-align in the overlat css. And the #overlay img rule is missing all together.

Try this:

/** Start Coding Here **/
#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

#overlay img {
  margin-top:10%;
}

In jour JS you are missing a few rules at the bottom as well. Add this underneath:

$overlay.click(function() {
//When overlay is clicked
  //Hide the overlay
  $overlay.hide();
});

Elian