Question

0

106

Views

Prevent image border from changing on toggle?

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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-08-31T06:43:26.293Z

You just need fix `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>

0

106

Prevent image border from changing on toggle?

1 answers

0

You just need fix height of your img-container:

Find remote jobs

Andres GPT

You just need fix `height` of your `img-container`: