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

Quillor Studio
Quillor Studio
7,658 Points
Posted by Quillor Studio
Quillor Studio
7,658 Points

Image Opacity on Overlay

Hi Guys,

My image opacity is inheriting the attributes of the overlay, making it transparent, when I don't want it to.

See here: http://web-l9wzk26gof.treehouse-app.com/

Does anyone know how I could rewrite my jQuery so that the image is appended after the overlay instead of inside of it?

Here's my jQuery code: http://web-l9wzk26gof.treehouse-app.com/js/app.js

Thanks!

Tim

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Tim,

Your preview url's aren't working. You may need to post the relevant code of where you think the problem is.

2 Answers

Aleem Mohamed
PLUS
Aleem Mohamed
Courses Plus Student 7,011 Points
Aleem Mohamed
Aleem Mohamed
Courses Plus Student 7,011 Points

Hi Tim Rosenberg,

This may not be a jQuery issue but more of a CSS issue. In your CSS you have the following:

#overlay{
  background:#000;
  opacity: .6;

Merge the background and opacity property and values and use RGBA. So you...

  background:rgba(0,0,0,0.6);

Here's an example: http://jsfiddle.net/Captainslow/c6sCd/1/

I think what you were doing was setting the entire <div> to have an opacity when you only wanted the background to have an opacity.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Tim,

This is correct here. i checked the project css file and it doesn't use opacity anywhere.

When you set opacity on an element it's going to apply to all the children as well.

This project uses an rgba background color as Aleem has shown.