Увеличение изображения, когда текст накладывается на него (на изображении)

Question

Хорошо, у меня есть это:

Я хочу добавить картинки в Рекомендацию 1, Рекомендовать 2 ... Я добился этого с помощью тега <img>. Но у меня есть две проблемы:

1) Он не будет соответствовать квадрату, он просто устанавливает высоту и ширину изображения. (Смотрите это изображение: https://imgur.com/a/Hkm6ZRy)

2) Мне нужно, чтобы текст находился внизу изображения / контейнера (как сейчас). Я попытался исправить это с помощью position: absolute;, но я получил это - https://imgur.com/a/9OdDF1I. Изображение почему-то вверху справа

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

Вот HTML-код (для 4 рекомендуемых элементов):

<div class="col-xl-9 col-md-9 sec-three-right bg-primary">
<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" style="width:100%;">
            <div class="mt-auto right-pick">Recommend 1</div>
        </div>
        <div class="col-xl-6 bg-success d-flex flex-column">
            <div class="mt-auto right-pick"> Recommend 2 </div>
        </div>
        <div class="col-xl-6 bg-danger d-flex flex-column">
            <div class="mt-auto right-pick"> Recommend 3 </div>
        </div>
        <div class="col-xl-6 bg-info d-flex flex-column">
            <div class="mt-auto right-pick"> Recommend 4 </div>
        </div>
    </div>
</div>

Вот CSS:

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

Вот JSFiddle: https://jsfiddle.net/prozik/jvneLe9e/

Я хочу, чтобы это выглядело так:

Я использую Bootstrap v4.1.0 и jQuery 3.3.1.

Answer 1

Я исправил это.Вы также должны удалить отступы по умолчанию из классов .col.

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

Фиксированный код: -

https://jsfiddle.net/jvneLe9e/1/

Answer 2

Исправлена ​​проблема с position: absolute;: Вот HTML-код:

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

И CSS:

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

Это результат: