I have a bootstrap-card with a background-image and some content over it. Now I want to have a zoom-in-effect on the background-image when I hover over the card. I can do this with an initial background-size of 100% and then transition to a background-size of 110%. The only problem is that when my container has a different aspect-ratio than the image, it will show a white border at the top and bottom of the image in the card (see image below).
The images all have a different aspect-ratio, and the height of the bootstrap-card is relevant to the content in the card.
To partly fix this, I can use background-size: cover, but then the transition breaks because it can't go gradually from "cover" to "110%".
I can't use scale, because I only want the background-image to zoom on hover, not the content.
I have knowledge of JavaScript and jQuery. If there is a solution to use js, I can do so.
I also tried the following thread: background-transition with background-size: cover. The problem is that the height and width aren't static, and can change by resizing the viewport or adding more content.
Multiple cards with different image aspect-ratio
<div class="card category-project h-100" style="background-image: url('https://dummyimage.com/1200x850/000000/fff')">
<div class="card-body">
<h5 class="card-title">Realy long title here to expand the card-content</h5>
</div>
<div class="pb-2 card-footer row gx-5 justify-content-start">
<div class="col-auto card-tag text-center">
<p class="my-0 mx-1">{{ trim($tag) }}</p>
</div>
</div>
</div>
JSFiddle
To partly fix this, I used background-size: cover, but then the transition breaks because it can't go gradually from "cover" to "110%".
I also tried using scale, but then the content (and the whole card) grows as well.
