Z-index + opacity = failure, HTML/CSS

Question

I have images wrapped up in a number of parent divs to create an outlined box offset compared to the image itself. Each image is a link to a page. This is what it looks like:

    <div id="boxes-wrapper">
        <div class="cointainer" id="container1">
            <div class="box-border">
                <div class="image-wrapper">
                    <div class="image-size">
                        <a href="..\pages/centri.html"><img id="img1" src="..\photos/titlepage/batch35.jpg" alt="Centri Sociali di Milano"/>
                        <h5>Centri Sociali di Milano</h5></a>
                </div>
            </div>
        </div>
    </div><!--boxes wrapper-->

I have script that reduces opacity of images until one is hoevered. Hovered image gains opacity 1, others drop opacity more. On mouseleave, all images return to hard-coded opacity. This part works fine- as long as the images can be hovered!

The .image-size div often covers up the images. It somehow gets a higher z-index because of the opacity change of its child. As a result, the hover event does not trigger for img elements because they are stacked behind the .image-size . Therefore, the links are unclickable unless you find the sliver of image that can be clicked.

Here is a link to a working CodePen. The script affects opacity and only works on the outer edges of some photos because of this z-index layering.

https://codepen.io/WallyNally/pen/PGYVgX

I just need the img s to get the highest z-index so that they may be on top. That should fix everything. Unfortunately, setting their z-index does not change anything. All elements in the document have been positioned . I can change the z-index of their parents to -1, but then the grandparent takes priority. You can keep doing this until you reach body . Once body and html have been set to -1, you are right back where you started.

Does anybody have a solution? I'm all stumped out on this one.

Answer 1

This solution is an amendment to one previously provided by Maju. Using this structure, margins to not overlap the image area and the opacity stack is as anticipated.

However, there is still a small amount of margin extension when there is a difference between .border width and .border img width. This code is the optimal solution for the situation, but not the best. If you have suggestions on how to eliminate this margin, please add them in the comments.

.wrap holds the border, image, and subtitle

.border sizes the border and holds the image.

<div class='wrap' id='cap1'>
    <div class='border' id='con1'>
        <a href="..\pages/centri.html"><img id="img1" src="https://placekitten.com/275/400"/ alt="Squatting and social housing crisis in London"/></a>
    </div>
    <h5>Centri Sociali di Milano</h5>
</div>

<div class='wrap' id='cap2'>
    <div class='border' id='con2'>
    <div class='img-wrap' id='img2'>
        <a href="https://placekitten.com/750/500"/ alt="Squatting and social housing crisis in London"/></a>
        </div>
    </div><h5>Squatting and Social Housing Crisis in London</h5>
</div>

<div class='wrap' id='cap3'>
    <div class='border' id='con3'>
        <a href="..\pages/anxiety.html"><img id="img3" src="https://placekitten.com/258/200" /></a>
    </div><h5>Anxiety</h5>  
</div>

and the CSS

.wrap {
    display: inline-block;
    position: absolute;
}

.border {
    display: inline-block;
    box-shadow:  
        0 0 0 1px #7b0700;
    position: absolute;
    width: 0;
    }

img {
    display: block;
    position: relative;
    }
#cap1 {
    top: 21%;
    left: 7%;
    width: 28%;
}
#con1 {
    padding-top: 6%;
    left: 3%;
    width: 100%;
}
#con1 img {
    margin-bottom: -6%;
    left: -9%;
    width: 100%;
}
#cap1 h5{
    margin-top: 77%;
}
#cap2{
    top: 32%;
    left: 44%;
    width: 22%;
}
#con2 {
    padding-top: 50%;
    left: 0%;
    width: 100%;
}

#con2 img {
    margin-top: -74%;
    left: -12%;
    width: 100%;
}
#cap2 h5 {
    margin-top: 63%;
}
#cap3 {
    top: 6%;
    left: 72%;
    width: 26%;
}
#con3 {
    padding-top: 5%;
    left: 0%;
    width: 72%;
}
#con3 img {
    margin-bottom: -14%;
    left: 4%;
    width: 98%;
}
#cap3 h5{
    left: -29%;
    margin-top: 111%;
}