after pushing the image outside card, it shows only half

user_14687782 0
Viewed 292

This is my sample output, as you can see here that the image is half.

enter image description here

The second photo provided is the output i'm trying to achieve.

enter image description here

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";
}
bootstrap-4 css html
5 Answers
.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.

user_154666250

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 .

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

Try this solution

Add here

<div class="row">

Extra style

<div class="row" style="margin-top: 50px">
user_155451160

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.

enter image description here

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

enter image description here

user_146877820
Related