I'm struggling with getting the hover image to fit the content area correctly. If I apply overflow: hidden to .card-content, it gets cropped to the size of the paragraph, and without it, the image overflows beyond the box. What I want is for div .card-content to fill the remaining space between the paragraph and the start of the card footer so that the hover image can occupy that area without overflowing. Any assistance on this issue would be highly appreciated. I am willing to set a height for .card-content and trim some of the image at the bottom or explore other workarounds. Here's the link to my current progress on CodePen: 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