Why the images in the background are glow up when I click? - html

Question

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.
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.

Answer 1

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 class="container1" style="cursor:default;">
<div class="container2">
<div class="content">
<a id="ant" href="#popup1" onclick="show('popup2')">
<div class="content-overlay"></div>
<img class="content-image" 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 class="content-details fadeIn-bottom" style="background-size:cover;">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif;">ANTIPASTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<div class="container2">
<div class="content">
<a id="prim">
<div class="content-overlay"></div>
<img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="border:2px solid rgb(205,144,76);padding:0; height:200px; width:330px;">
<div class="content-details fadeIn-bottom">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif;"> PRIMI PIATTI </h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
</div>
<div id="popup1" class="popup">
×
<h2>The Popup Has Arrived</h2>
<p>QUESTI SONO GLI ANTIPASTI</p>
</div>
<a href="#ant" class="close-popup"></a

Answer 2

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 class="container1" style="cursor: default">
<div class="container2">
<div class="content">
<a id="ant" href="#popup1" onclick="show('popup2')">
<div class="content-overlay"></div>
<img
class="content-image"
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 class="content-details fadeIn-bottom" style="background-size: cover">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif">ANTIPASTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<div class="container2">
<div class="content">
<a id="prim">
<div class="content-overlay"></div>
<img
class="content-image"
src="https://i.postimg.cc/5tNkjkV5/2.png"
style="border: 2px solid rgb(205, 144, 76); padding: 0; height: 200px; width: 330px"
/>
<div class="content-details fadeIn-bottom">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif">PRIMI PIATTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<!-- The popup should be entered as the last element so that it overlays the other elements -->
<div id="popup1" class="popup">
×
<h2>The Popup Has Arrived</h2>
<p>QUESTI SONO GLI ANTIPASTI</p>
</div>
</div>