如何在 hover 上制作元素（过渡后）

Question

i have a problem for css guru I'm not able to untangle.

This is the html:

<div class="container">
    <div class="around">
        <img class="depiction around-depiction"/>
        <div class="label">A label</div>
    </div>
    <div class="around">
        <img class="depiction around-depiction" />
        <div class="label">Another label</div>
    </div>
    ...
    <div class="center">        
        <img class="depiction center-depiction" />
        <div class="label">Center label</div>
    </div>
</div>

I've applied a transform to .around element to move in a circle around the .center element.

I cannot manage to do two thing:

1. When i hover over an image the image and its label should go above everything (i put a z-index: 10000 but that doesn't work
2. Make the .around image above the.around label. You can see by figure two that hover doesn't work on label div.

This is the css:

.container .circle {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: calc(-100px / 2);
    border-radius: 50%;
}

.center {
    border-radius: 50%;
    z-index: 1;
    position: absolute;
}

.depiction {
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}

.around-depiction:hover {
    transform: scale(4);
    z-index: 1000000;
}

.center-depiction:hover {
    transform: scale(2);
    z-index: 1000000;
}

.label {
    opacity: 0;
    min-width: 200px;
    z-index: -2;
    background: white;
    border-radius: 10px/20px;
    padding: 5px;
    border: 1px solid black;
}

.center:hover .label,
.around:hover .label {
    opacity: 1;
    z-index: 5;
}

.center .label:hover,
.around .label:hover {
    opacity: 0;
}

Answer 1

Try adding the z-index with position: relative; on your image/label. z-index doesn't work on the default, which is position: static;

https://coder-coder.com/z-index-isnt-working/