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

CSS

Posted by Kristian Woods
Kristian Woods
23,414 Points

I don't fully understand z-index

I don't fully understand how I achieved this result -

I have an image, and sitting directly above that image is a div with the class of overlay. Both have the CSS transition property.

I set the default value for the overlay div to 0 - However, on hover, I want the opacity to change to 1. Simultaneously, I want the image to scale in size.

When I set the overlay opacity to change to 1 on hover, it did. When I set the image to scale up on hover, it did. However, insert both declarations, it wouldn't work. I only got one or the other. BUT when I added a z-index value of 999 to the overlay, both worked.

Could someone explain what is going on?

<div class="scale_image_container">
        <div class="overlay">
            <h1>Fade Overlay</h1>
            <button type="button">Link</button>
        </div>
        <img src="https://placeimg.com/300/300/animals" alt="animal image">
    </div>

.scale_image_container {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
    img {
        transition: all .4s;
    }
    .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .6);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: all .4s;
        color: #fff;
        font-family: sans-serif;
        z-index: 999;
        button {
            width: 110px;
            border: none;
            border-radius: 30px;
            padding: .6em;
            color: gray;
            background-color: #fff;
            font-size: 1em;
            transition: all .4s cubic-bezier(.14, .01, .89, 1.47);
            &:hover {
                transform: scale(1.1);
                background-color: transparent;
                border: 2px solid #fff;
                color: #fff;
            }
        }
    }

    &:hover .overlay {
        opacity: 1;
    }

    &:hover img {
        transform: scale(1.4);
    }

}

Thanks

PS I'm using sass

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Normally, when two elements occupy the same space, the one that appears later in the HTML will be on top. So since the image comes after the overlay, the overlay is hidden under the image.

But by giving the container a relative position, it becomes a "positioning context" which allows the normal layer order to be overridden using z-index. Any explicit value puts the overlay in front of anything with a lower z-index, and the default is 0 (so 1 would work as well as 999).

For more info, see this MDN page on z-index.