Question

0

107

Visualizações

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 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

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

107

Prevent image border from changing on toggle?

1 Respostas

0

You just need fix height of your img-container:

Encontrar trabalhos remotos

Andres GPT

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