0

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 imgs 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.

Naltroc
  • 989
  • 1
  • 14
  • 34
  • If you set z-index for parent, you will be not able to change it later for its children elements. Every element inside .image-size has as well z-index -1. This is the reason, why you are not able to move mouse over the image. I would say, that z-index -1 works that way, that all those elements are also behind their parents without z-index. – Maju Sep 01 '16 at 19:20
  • 1
    Opacity creates a new stacking context, yes, just like positioning would do. Does [this page](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) help? – Mr Lister Sep 01 '16 at 19:27
  • Ok, problem with opacity and z-index is described in Mr Lister link. Good luck. – Maju Sep 02 '16 at 06:40
  • @Maju, I added an answer that modifies the structure you provided. It is similar, but functionally a little different. It also uses one fewer `div`. Let me know what you think of it. If it is functionally the same, pardon me for not knowing how to operate your provision in the first place. – Naltroc Sep 03 '16 at 13:25
  • @Naltroc, Less elements = cleaner code. Thumb up for this. And you have to know if the code works that way you need or not. I just didn't like the code from your question as there are elements on positions, where user just do not expect anything. But those elements are physically there overlapping images from the first row. It can only make troubles and even if it has solution... I just think that z-index/opacity solution is somehow irrelevant. Because you can move everything to positions where user can expect something. It makes sense... Or not? – Maju Sep 04 '16 at 20:35

1 Answers1

0

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%;
}
Naltroc
  • 989
  • 1
  • 14
  • 34