Why the images in the background are glow up when i click?-CodePudding

when i click my <a> tag for the popup box, the images in the background (with overlay effects) are glowing up, and i don't know why. If anybody know something i write the code under here. Thank you.

As you can see i've put href to #popup1 in the first <a> tag, and it opens the popup box, but in the background you can see the image like glowing,the border too. I've changed the display tag and other css tags but nothing.

here is the [CODEPEN] https://codepen.io/elteoz/pen/xxJVPvp

CodePudding user response：

It depends on the order of your HTML-Elements. This example will fix the problem

.container1 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 110px;
  align-content: space-around;
  justify-content: center;
  transition: all 0.2s linear;
}

.container1 > div {
  padding: 40px;
  justify-content: center;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.main-title {
  color: #2d2d2d;
  text-align: center;
  text-transform: capitalize;
  padding: 0.7em 0;
}

.container {
  padding: 1em 0;
  float: left;
  width: 50%;
}
@media screen and (max-width: 640px) {
  .container {
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px) {
  .container {
    width: 33.33333%;
  }
}

.container .title {
  color: #1a1a1a;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  margin-bottom: 10px;
}

.content {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 100%;
  margin: auto;
  overflow: hidden;
  transition: transform 0.4s;
}

.content .content-overlay {
  /*  background: rgba(70,34,0);*/
  background: rgba(214, 142, 60, 70%);
  /*  background:  rgb(214,142,60);*/
  position: absolute;
  height: 97%;
  width: 100%;
  left: 30px;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay {
  opacity: 0.5;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details {
  top: 50%;
  left: 50%;
  right: 50%;
  opacity: 1;
}

.content-details h3 {
  color: #fff;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  padding-left: 20px;
  text-transform: uppercase;
}

.content-details p {
  color: #fff;
  font-size: 0.8em;
  text-align: center;
  padding-left: 20px;
}

.fadeIn-bottom {
  top: 80%;
}

.fadeIn-top {
  top: 20%;
}

.fadeIn-left {
  left: 20%;
}

.fadeIn-right {
  left: 80%;
}

h1 {
  font-size: 3em;
  text-align: center;
  color: #00898e;
  margin: 0;
  padding: 30vh 0 1em;
}
h2 {
  text-align: center;
  white-space: nowrap;
  color: #00898e;
}
a {
  text-decoration: none;
  color: #fff;
}
p {
  text-align: left;
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #00898e;
  border-radius: 10px;
  transition: background 0.3s;
}
.btn:hover {
  background: #00898e;
}
.popup {
  position: fixed;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
  z-index: 1;
}
.popup:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.popup-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
}
.popup .close {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  color: #000;
  transition: color 0.3s;
  font-size: 2em;
  line-height: 0.6em;
  font-weight: bold;
}
.popup .close:hover {
  color: #00e5ee;
}

.close-popup {
  background: rgba(0, 0, 0, 0.7);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
}
.popup:target   .close-popup {
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

<div  style="cursor: default">
  <div >
    <div >
      <a id="ant" href="#popup1" onclick="show('popup2')">
        <div ></div>
        <img
          
          src="https://i.postimg.cc/5tNkjkV5/2.png"
          style="z-index: 0; height: 200px; width: 330px; border: 2px solid rgb(205, 144, 76); padding: 0"
        />
        <div  style="background-size: cover">
          <h3  style="font-family: 'Roboto', sans-serif">ANTIPASTI</h3>
          <p ></p>
        </div>
      </a>
    </div>
  </div>

  <div >
    <div >
      <a id="prim">
        <div ></div>
        <img
          
          src="https://i.postimg.cc/5tNkjkV5/2.png"
          style="border: 2px solid rgb(205, 144, 76); padding: 0; height: 200px; width: 330px"
        />
        <div >
          <h3  style="font-family: 'Roboto', sans-serif">PRIMI PIATTI</h3>
          <p ></p>
        </div>
      </a>
    </div>
  </div>

<!-- The popup should be entered as the last element so that it overlays the other elements -->
  <div id="popup1" >
    <a href="#ant" >&times;</a>
    <h2>The Popup Has Arrived</h2>
    <p>QUESTI SONO GLI ANTIPASTI</p>
  </div>
  <a href="#ant" ></a>
</div>

CodePudding user response：

the problem is actually you add pop-up before container 2 so that's why it is glowing. So, if you dont want to make this glow just add your pop-up division after both containers like this. Dont change your Css. you just have to change position of divisions like this

<div  style="cursor:default;">
            <div >
              <div >
                <a id="ant" href="#popup1" onclick="show('popup2')">
                  <div ></div>
                  <img  src="https://i.postimg.cc/5tNkjkV5/2.png" style="z-index: 0;height: 200px;width: 330px;border:2px solid rgb(205,144,76);padding:0;">
                  <div  style="background-size:cover;">
                    <h3  style="font-family: 'Roboto', sans-serif;">ANTIPASTI</h3>
                    <p ></p>
                  </div>
                </a>
              </div>
            </div>




        
            <div >
                <div >
                    <a id="prim">
                        <div ></div>
                        <img  src="https://i.postimg.cc/5tNkjkV5/2.png" style="border:2px solid rgb(205,144,76);padding:0; height:200px; width:330px;">
                        <div >
                            <h3  style="font-family: 'Roboto', sans-serif;"> PRIMI PIATTI </h3>
                            <p ></p>
                        </div>
                    </a>
                </div> 
            </div>
        </div>
<div id="popup1" >
              <a href="#ant" >&times;</a>
              <h2>The Popup Has Arrived</h2>
              <p>QUESTI SONO GLI ANTIPASTI</p>
            </div>
            <a href="#ant" ></a