Zoom in image while text is overlapping it (in the image) - html

Question

Okay so I have this:
I want to add pictures in the Recommend 1, Recommend 2 ... I have achieved this using the <img> tag. But I have two problems:
1) It will not fit the square, it just sets the height and width of the image. (See this image: https://imgur.com/a/Hkm6ZRy )
2) I need the text to be on the bottom of the image / container (just like it is right now.) I tried fixing this with position: absolute;, but I got this - https://imgur.com/a/9OdDF1I . The image is top right for some reason.
I'm not using css background image because I need the zoom effect when the user hover over the picture.
Here is the HTML (for the 4 recommend elements):
<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>
Here is the 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;
}
Here is the JSFiddle: https://jsfiddle.net/prozik/jvneLe9e/
I want it to look like this:
I'm using Bootstrap v4.1.0 and jQuery 3.3.1.

Answer 1

Fixed my problem with position: absolute;:
Here is the 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>
And the 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%;
}
This is the result:

Answer 2

I have fixed it. You also have to remove default padding from the .col classes.
.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;
}
Fixed Code :-
https://jsfiddle.net/jvneLe9e/1/