Mi sitio web utiliza algunas imágenes que ocultan/muestran una superposición onclick .
Creé un borde personalizado alrededor de estas imágenes usando .img-container::after y .img-container::before
No puedo entender por qué el borde cambia su altura cuando se alterna la superposición de imágenes. Mi intención es que el borde siempre se muestre alrededor de la imagen que es estática.
Por favor, eche un vistazo al ejemplo. Gracias por cualquier consejo.
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 de su 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>