Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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
215,957 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.