Html 显示图例文本时防止容器增长

当文本显示在hover上时，我试图阻止图像和子文本的容器增长。在悬停时，您可以看到公文包项目元素调整大小以适应文本，其背景色显示在底部

我试着在文本上使用绝对位置，但是它使文本在图像中间定位几乎不可能。

这是我制作的一支代码笔，它是我正在制作的代码笔的复制品：

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>

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;
}