My website uses some images that hide/show an overlay onclick.
I've built a custom border around these images uesing .img-container::after and .img-container::before
I can't work out why the border changes its height when the image overlay is toggled. My intention is for the border to always be displayed around the image which is static.
Please take a look at the example. Thanks for any advice.
function toggleImage(){
document.querySelector('#PlanOverlay').classList.toggle('img-hidden');
}.container {
position: relative;
width: auto;
height: auto;
display: inline-block;
}
.info-container {
position: absolute;
width: auto;
height: auto;
display: grid;
place-items: relative;
grid-template-areas: "inner-div";
}
/* Image wrap with corner borders */
.img-container {
position: relative;
width: 200px;
height: inherit;
margin: 10px;
background-color: #fff;
display: grid;
place-items: absolute;
grid-template-areas: "inner-div";
}
.img-container::after {
display: block;
content: "";
width: 30%;
height: 30%;
position: absolute;
top: -10px;
right: -10px;
border-top: 2px solid #ff8a8a;
border-right: 2px solid #ff8a8a;
padding-top: 25px;
}
.img-container::before {
display: block;
content: "";
width: 30%;
height: 30%;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 2px solid #ff8a8a;
border-left: 2px solid #ff8a8a;
padding-bottom: 25px;
}
.img-info {
position: absolute;
grid-area: inner-div;
width: auto;
z-index: 1;
}
.img-hidden {
position: absolute;
grid-area: inner-div;
width: auto;
z-index: 2;
mix-blend-mode: multiply;
}<div class="container">
<div class="info-container">
<div class="img-container">
<img src="https://via.placeholder.com/200/ff0000" onClick="toggleImage()" class="img-info" />
<div>
<img src="https://via.placeholder.com/200/0000ff" id="PlanOverlay" onClick="toggleImage()" class="img-hidden" />
</div>
</div>
</div>
</div>height of your img-container:function toggleImage() {
document.querySelector('#PlanOverlay').classList.toggle('img-hidden');
}.container {
position: relative;
width: auto;
height: auto;
display: inline-block;
}
.info-container {
position: absolute;
width: auto;
height: auto;
display: grid;
grid-template-areas: "inner-div";
}
/* Image wrap with corner borders */
.img-container {
position: relative;
width: 200px;
height: 200px;
margin: 10px;
background-color: #fff;
display: grid;
grid-template-areas: "inner-div";
}
.img-container::after {
display: block;
content: "";
width: 30%;
height: 30%;
position: absolute;
top: -10px;
right: -10px;
border-top: 2px solid #ff8a8a;
border-right: 2px solid #ff8a8a;
padding-top: 25px;
}
.img-container::before {
display: block;
content: "";
width: 30%;
height: 30%;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 2px solid #ff8a8a;
border-left: 2px solid #ff8a8a;
padding-bottom: 25px;
}
.img-info {
position: absolute;
grid-area: inner-div;
width: auto;
z-index: 1;
}
.img-hidden {
position: absolute;
grid-area: inner-div;
width: auto;
z-index: 2;
mix-blend-mode: multiply;
}<div class="container">
<div class="info-container">
<div class="img-container">
<img src="https://via.placeholder.com/200/ff0000" onClick="toggleImage()" class="img-info" />
<div>
<img src="https://via.placeholder.com/200/0000ff" id="PlanOverlay" onClick="toggleImage()" class="img-hidden" />
</div>
</div>
</div>
</div>