Search code examples
htmlcsspopuppopupwindow

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

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.

Solution

  • 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">
              <a href="#ant" class="close">&times;</a>
              <h2>The Popup Has Arrived</h2>
              <p>QUESTI SONO GLI ANTIPASTI</p>
            </div>
            <a href="#ant" class="close-popup"></a