I am currently experimenting with a bootstrap card using HTML, CSS, and Bootstrap.
My main focus right now is on how to shrink the image when hovering over it. The .card-header-img has a fixed height of 150px that I do not want to modify. What I want to achieve is to scale down the image on hover while ensuring that the entire image remains visible (both in width and height)!
I would prefer a solution that does not involve JavaScript. I have already attempted the following approach, but it doesn't seem to work:
transform: scale(1, calc(150px / var(--initial-height)));
.acf-blocksy-child-container {
width: 70%;
}
.card-header-img {
position: relative;
height: 150px;
/* Fixed height */
overflow: hidden;
}
.card-header-img img {
width: 100%;
height: 100%;
object-fit: cover;
/* Ensure the image covers the entire container */
transition: transform 0.3s ease-in-out;
}
.card-header-img::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* Dark overlay */
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.card-header-img:hover img {
/* Scale down the image on hover */
transform: scale(0.7);
}
.card-header-img:hover::before {
opacity: 0;
/* Dark overlay disappears on hover */
}
.card-header-img:hover .card-title,
.card-header-img:hover .card-text {
display: none;
/* Hide title and text on hover */
}<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' rel='stylesheet'>
<div class='container-fluid acf-blocksy-child-container'>
<div class='row'>
<div class='col-md-12 mt-5'>
<div class='card'>
<!-- CARD HEADER -->
<div class='card-header card-header-img' style='--initial-height: 250px'>
<img src='https://cdn4.vectorstock.com/i/1000x1000/07/08/long-neck-giraffe-height-measure-vector-12290708.jpg' class='card-img img-fluid' alt='Card image'>
<div class='card-img-overlay'>
<h5 class='card-title text-white'>Card title</h5>
<p class='card-text text-white'>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class='card-text text-white'>Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
</div>
</div>