Transition on popup does not fade in

Question

I am trying to make the popup fade in by using a transition on it and using opacity.

You are supposed to be able to toggle the popup by clicking the 'bottle' text.

I can't seem to find the problem. Any help? this is my code:

HTML:

    <div class="box">
          <div class="box_container">
            <img src="images/blikje.png" alt="bottle">
            <h3>Bottle</h3>
          </div>
          <div class="box_popup">
            <img src="images/blikje.png" alt="bottle">
            <div class="box_popup-content">
              <h2>bottle</h2>
              <hr>
              <p>test</p>
            </div>
          </div>
        </div>

CSS:

.box_popup{
 opacity: 0;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 padding: 10vh;
 background-color: rgba(0, 0, 0, 0.5);
 border-radius: 10px;
 display: none;
 align-items: center;
 justify-content: center;
 transition:all 1s ease-in;
 }

.box.active .box_popup{
 opacity: 1;
 z-index: 1000;
 display: flex;
 transition:all 1s ease-in;
 }

JS:

<script>

    let box = document.querySelectorAll('.box');
    box.forEach(popup => popup.addEventListener('click', () => {
    popup.classList.toggle('active');
    }))

     </script>

and a ss of the popup: ss of popup Thanks in advance.

Answer 1

Remove the display:none declaration from .box_popup as it hides the element.

From MDN:

[display: none] Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.

let box = document.querySelectorAll('.box');
box.forEach(popup => popup.addEventListener('click', () => {
  popup.classList.toggle('active');
}))

.box_popup {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10vh;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  transition: all 1s ease-in;
}

.box.active .box_popup {
  opacity: 1;
  z-index: 1000;
  display: flex;
  transition: all 1s ease-in;
}

<div class="box">
  <div class="box_container">
    <img src="images/blikje.png" alt="bottle">
    <h3>Bottle</h3>
  </div>
  <div class="box_popup">
    <img src="images/blikje.png" alt="bottle">
    <div class="box_popup-content">
      <h2>bottle</h2>
      <hr>
      <p>test</p>
    </div>
  </div>
</div>

The display property