after pushing the image outside card, it shows only half - html

Question

This is my sample output, as you can see here that the image is half.
The second photo provided is the output i'm trying to achieve.
I don't know what seems to be the problem here, but when i remove the class, "carousel-inner" the image output is complete, but when i put it back, it shows only half image.
this is my html code and i'm using bootstrap 4
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
.customer-card-parent{
margin-top: 41px;
width: 100%;
max-width: 964px;
margin-left: auto;
margin-right: auto;
}
.customer-card{
width: 100%;
max-width: 290px;
padding: 39px 0px 35px 0px;
border-radius: 5px;
background: #fff;
}
.customer-img{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
max-width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: 11px solid #fff;
background-color: #cecece;
}
.customer-img img{
width: 100%;
height: auto;
position: relative;
top: 21px;
transform: scale(1.4, 1.3);
}
.customer-txt-area .john{
font-size: 18px;
color: #696969;
margin: 0px;
padding-top: 40px;
padding-left: 15px;
padding-right: 18px;
line-height: 23px;
font-family: "MyriadPro";
}

Answer 1

.customer-img
{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
max-width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: 11px solid #fff;
background-color: #cecece;
}
you have to remove "overflow: hidden;" from the above code.

Answer 2

Just remove overflow: hidden; from the parent element, which is ".customer-img" in your case and remember to add padding of half the size of the image to ".customer-card" parent element .

Answer 3

.customer-img{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
top:-55px is pushing the image out of the card and since abolute position is used, height of card doesn't consider image height so use min-height or height for card.
.customer-card{
width: 100%;
min-height:300px;
max-width: 290px;
padding: 39px 0px 35px 0px;
border-radius: 5px;
background: #fff;
}

Answer 4

Try this solution
Add here
<div class="row">
Extra style
<div class="row" style="margin-top: 50px">

Answer 5

Just now, i managed to somehow "solved" the issue here without changing any css. I just added some classes to my carousel-inner.
as you can see in this photo, i added border class to my carousel-inner class in order to see the actual "height" and "width" of my div and it shows like this.
<div class="carousel-inner border ">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
So, i tried adding some classes to my carousel-inner
<div class="carousel-inner border d-flex justify-content-center align-items-center">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
and now it shows something like this.