Html 文本重叠时放大图像（在图像中）

好的，我有这个：

我想在推荐1，推荐2中添加图片。。。我使用

标记实现了这一点。但我有两个问题：

1） 它不适合正方形，它只设置图像的高度和宽度。（见下图：）

2） 我需要文本位于图像/容器的底部（就像现在一样）。我尝试用

position:absolute，但我得到了这个-。由于某种原因，图像位于右上方

我没有使用css背景图像，因为当用户将鼠标悬停在图片上时，我需要缩放效果

以下是HTML（针对4个推荐元素）：

以下是JSFIDLE：

我希望它看起来像这样：

我使用的是Bootstrap v4.1.0和jQuery 3.3.1。
修复了我在
位置：绝对位置的问题：
以下是HTML：

.sec-three-left {
    padding-left: 0;
    padding-right: 0;
}

.sec-three-right {
    padding-left: 0;
    padding-right: 0;
}    

.right-pick {
     margin-bottom: 25px;
     font-size: 25px;
     letter-spacing: 0.8px;
     color: white;
     text-shadow: 2.5px 2.5px black;
}

 .zoom {
      position: relative;
      overflow: hidden;
 }

 .zoom:hover img {
      transform: scale(1.1);
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
  }

  .zoom img {
       transition: all 0.4s;
       -moz-transform: all 0.4s;
       -webkit-transform: all 0.4s;
   }

结果是：

我已经修好了。您还必须删除.col类中的默认填充

.right-pick {
    position: absolute;
    font-size: 25px;
    letter-spacing: 0.8px;
    color: white;
    text-shadow: 2.5px 2.5px black;
    bottom: 15px;
    text-align: center;
    width: 100%;
}

固定代码：-


 <div class="col-xl-9 col-md-9 sec-three-right">
    <div class="container-fluid h-100">
        <div class="row h-100 text-center">
            <div class="col-xl-6 d-flex flex-column zoom">
                <img class="img-fluid" src="img/pickone.jpeg" alt="pickone">
                <div class="mt-auto right-pick">Recommend 1</div>
            </div>
            <div class="col-xl-6 d-flex flex-column zoom">
                <img class="img-fluid" src="img/pickone.jpeg" alt="pickone">
                <div class="mt-auto right-pick"> Recommend 2 </div>
            </div>
            <div class="col-xl-6 d-flex flex-column zoom">
                <img class="img-fluid" src="img/pickone.jpeg" alt="pickone">
                <div class="mt-auto right-pick"> Recommend 3 </div>
            </div>
            <div class="col-xl-6 d-flex flex-column zoom">
                <img class="img-fluid" src="img/pickone.jpeg" alt="pickone">
                <div class="mt-auto right-pick"> Recommend 4 </div>
            </div>
        </div>
    </div>
</div>

.right-pick {
    position: absolute;
    font-size: 25px;
    letter-spacing: 0.8px;
    color: white;
    text-shadow: 2.5px 2.5px black;
    bottom: 15px;
    text-align: center;
    width: 100%;
}

.right-pick {
    position:absolute;
    bottom :20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 25px;
    letter-spacing: 0.8px;
    color: white;
    text-shadow: 2.5px 2.5px black;
}