On hover I would like to display an image that covers the content area above the card footer and below the hr tag, but should not overflow

Question

I am having trouble forcing the hover image to fill the content area. If I use overflow: hidden on the .card-content it is cropped to the size of the paragraph and otherwixe the image flows beyond the box. I would like the div .card-content to fill the remaining area from the paragraph to where the card footer beings so that the hover image will fill that area without overflowing. Any help would be greatly appreciated. I am open to setting a height to the .card-content and cutting off some of the image at the bottom or any other work around. Here is the codepen to what I have so far: https://codepen.io/JeyDen44/pen/wvQdMyE

<style type="text/css">
body{
  padding: 2rem 0rem;
}

.card-body{
  padding: 1.25rem 0px;
}

hr {
  margin-left: 1.25rem;
}
.card-title, .card-subtitle, .card-text  {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.card {
  height: 410px;
   display: flex;
  flex-flow: column;

}

.card-content {
  position: relative;

  flex: 1 1 auto;

}

.preview_image {
  display: none;
  width: 100% ;
  position: absolute;
  top: 0;
object-fit: contain;
}

.card:hover {
  .preview_image {
    display: block;
  } 
}
</style>
<div class="container">
  <div class="row">
    
    <!-- Card 1 -->
    <div class="col-lg-3 col-md-6 mb-5">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">1 Line</h4>
          <hr class="my-3" style="width:25px;border-top:3px solid #000">
          <div class="card-content">
          <h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
          <p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
             <img class="preview_image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Peacock_by_Nihal_jabin.jpg/220px-Peacock_by_Nihal_jabin.jpg" />
        </div>
        </div>
        <div class="card-footer text-danger">
          Test Bottom
        </div>
      </div>
      </div>
    
    <!-- Card 2 -->
    <div class="col-lg-3 col-md-6 mb-5">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">This is a test of 2 Lines of Text</h4>
          <hr class="my-3" style="width:25px;border-top:3px solid #000">
          <div class="card-content">
          <h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
          <p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
                                <img class="preview_image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Peacock_by_Nihal_jabin.jpg/220px-Peacock_by_Nihal_jabin.jpg" />
          </div>
        </div>
        <div class="card-footer text-danger">
          Test Bottom
        </div>
      </div>
    </div>
    
        <!-- Card 3 -->
    <div class="col-lg-3 col-md-6 mb-5">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">This is a test with 3 lines of text to display</h4>
          <hr class="my-3" style="width:25px;border-top:3px solid #000">
          <div class="card-content">
                                <img class="preview_image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Peacock_by_Nihal_jabin.jpg/220px-Peacock_by_Nihal_jabin.jpg" />
          <h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
          <p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>

          </div>

        </div>

        <div class="card-footer text-danger">
          Test Bottom
        </div>
      </div>
    </div>
  </div>
</div>

your text

Answer 1

Add it to the ".card-body" class. It solves your problem.

.card-body{
  overflow: hidden;
}