How to enlarge and darken an image in a card on hover?

Question

css

There is a modified bootstrap card with a picture
https://jsfiddle.net/q89zg0vm/
Need an ivi effect https://www.ivi.tv
When you hover over a card with a movie, the card becomes taller, the image becomes a little confused and darkened

How to do this?

Answer 1

Dimming: Pseudo element with rgba(0,0,0,0.5) or whatever you want.
Zoom: transform: scale(1.2) or whatever you need.
How exactly is done on ivi can be viewed through the developer tools in any adequate browser.

Answer 2

.card-img:before:hover {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
}
.card-img:hover {
transform: translateY(10px);
}