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 4

Modure Rares
PLUS
Modure Rares
Courses Plus Student 9,041 Points
Posted by Modure Rares
Modure Rares
Courses Plus Student 9,041 Points

Opacity image

I set the opacity of the overlay to 0.8 bu i dont want all the elemnts inside the overlay to have the opacity of 0.8 (for example the images). What can i do ?? Please help;

#overlay {
    width: 100%;
    height: 100vh;
    background-color: black;
    opacity: 0.8;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
}

#overlay-image {
    opacity: 1;
    background-color: black;
}

1 Answer

Konrad Traczyk
Konrad Traczyk
22,287 Points
Konrad Traczyk
Konrad Traczyk
22,287 Points

Delete the opacity property and set your overlay background color to rgba(0, 0, 0, .8).