Is there a way I can make a div expand to cover all the available space, hiding all the content it expands onto?

I have a parent div that contains 4 equal divs (25% each), horizontally side by side, containing an image. I want the div to expand on click, such that the div animates to cover the whole parent div (100% width). And then some text animates in over the image.

I'm trying to do this via flex box in css, but even though the clicked div expands it doesn't cover the complete parent div. The remaining 3 div shrink but do not completely disappear.

I also tried doing this via Javascript, by adding the property display: none to all the other divs. However, this doesn't allow me to add any animations.

<div class="expand-column-wrapper">
  <div class="expanded-column">
    <h3 class="expand-column-header">Sustainable
Living</h3>
    <p class="expand-column-content">Hello there.</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Protecting Society</h3>
    <p class="expand-column-content">If you hover</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Health and Wellness</h3>
    <p class="expand-column-content">over each section</p>
  </div>
  <div class="expanded-column">
    <h3 class="expand-column-header">Digital Communities</h3>
    <p class="expand-column-content">over each section</p>
  </div>
</div>

$white: white;

$expand-column-transition: all 1s ease-in-out;
$expand-column-background-color: #2c3840;
$expand-column-hover-width: 100%;
$expand-column-fluid: true;

.customDisplay{
  display: none !important;
}

.expand-column-wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .expanded-column {
    padding: 1rem;
    flex: 1 1 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: $expand-column-transition;

    &:hover{
      cursor: pointer;
    }
  }

  .expand-column-header, .expand-column-content {
    color: $white;
  }

  .expand-column-header {
    width: 100%;
    text-align: center;
  }

  .expand-column-content {
    font-weight: bold;
    opacity: 0;
    flex-basis: 1%;
  }
}

.tempClass{
    flex-basis: $expand-column-hover-width;
    .expand-column-content {
      opacity: 1;
      flex-basis: 50%;
      transition: $expand-column-transition;
    }
 }

.expand-column-wrapper .expanded-column {
  &:nth-of-type(1) {
    background: url('https://images.pexels.com/photos/2154/sky-lights-space-dark.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }

  &:nth-of-type(2) {
    background: url('https://images.pexels.com/photos/113744/helix-nebula-ngc-7293-planetary-fog-constellation-aquarius-113744.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }

  &:nth-of-type(3) {
    background: url('https://images.pexels.com/photos/2162/sky-space-dark-galaxy.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }

  &:nth-of-type(4) {
    background: url('https://images.pexels.com/photos/41951/solar-system-emergence-spitzer-telescope-telescope-41951.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
    height: 100vh;
    background-size: cover;
  }
}

$('.expanded-column').click(function (){
  var listL = $('.expanded-column');
  var listLen = listL.length;
  for(i = 0; i < listLen; i++){
    if(i != $(this).index()){
      $(listL[i]).addClass("customDisplay");
    }
    else{
      $(this).addClass("tempClass");
    }
  }
});

$('.expanded-column').mouseleave(function(){
  $(this).removeClass("tempClass");
  $('.expanded-column').removeClass("customDisplay");
});