Предотвращение роста контейнера при отображении текста легенды

Я пытаюсь остановить рост контейнера моего изображения и подтекста, когда текст отображается при наведении. В данный момент при наведении курсора вы можете видеть, что размер элемента Portugal__item изменяется, чтобы он соответствовал тексту, а цвет его фона появляется внизу.

Я пробовал использовать position: absolute в тексте, но это делает позиционирование текста в середине изображения практически невозможным.

Вот ручка кода, которую я сделал, это копия того, над чем я работаю: https://codepen.io/Olivier42M/pen/oNzwGEL

HTML:

<div class = "wrapper"> 
 <div class = "portfolio">
    <a href = "" class = "portfolio__item">
      <img src = "https://i.imgur.com/MKuGA17.jpeg" alt = "" class = "portfolio__img">
      <div class = "portfolio__text">Legend text</div>
    </a>
     <a href = "" class = "portfolio__item">
      <img src = "https://i.imgur.com/MKuGA17.jpeg" alt = "" class = "portfolio__img">
      <div class = "portfolio__text">Legend text</div>
    </a>
     <a href = "" class = "portfolio__item">
      <img src = "https://i.imgur.com/MKuGA17.jpeg" alt = "" class = "portfolio__img">
      <div class = "portfolio__text">Legend text</div>
    </a>
     <a href = "" class = "portfolio__item">
      <img src = "https://i.imgur.com/MKuGA17.jpeg" alt = "" class = "portfolio__img">
      <div class = "portfolio__text">Legend text</div>
    </a>
     <a href = "" class = "portfolio__item">
      <img src = "https://i.imgur.com/MKuGA17.jpeg" alt = "" class = "portfolio__img">
      <div class = "portfolio__text">Legend text</div>
    </a>
   
 </div>
</div>

CSS:

body{
  margin:0;
  padding:0;
}

.wrapper{
  text-aligne: center;
}

.portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.portfolio__item {
    background-color: orange;
    text-decoration: none;
    overflow: hidden;
    
}

.portfolio__img {
    transition: 
        transform 750ms cubic-bezier(.5, 0, .5, 1),
        opacity 250ms linear;
}


.portfolio__item:focus {
    position: relative;
    z-index: 2;
}

.portfolio__img:hover,
.portfolio__item:focus .portfolio__img{
    transform: scale(1.2);
    opacity: .75;
}

.portfolio__text{
    z-index: 3;
    position: relative;
    color: white;
    margin-left: auto;
    font-size: 3em;
    bottom: 50%;
    opacity: 0;
    opacity: 0;
    height: 0;
    transition: 
        opacity 500ms linear;
    overflow: hidden;
}

.portfolio__item:hover .portfolio__text{
    opacity: 1;
    height: auto;
}