Transparent layer over img when hover ++ text - html

Question

I want to add an transparent layer over my img on a card when I hover over it, I have done that part but I want it to be cut to the img and not cover the footer on the card. If that makes sence?
this is the card with Hover. As u can see on the card, the img just covers like 90% of the card, I want the hover overlay to do the same
Card when not hover IMG
Card when hover IMG
.card {
position:relative;
width: 350px;
height: 335px;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
border-radius: 5px;
margin: 30px;
float: left;
}
#card_oslo{
background-image: url(img/oslo.jpg);
}
#card_oslo:hover{
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
transition: .5s;
}

Answer 1

You should use a pseudo-element for this. Use :after or :before and set it as full size also set the parent with position:relative; then change the opacity of the pseudo element on hover.
Working Demo.
.box {
position:relative;
}
.box:after {
content:"";
/* Set the element as full-size */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
/* Set bg and hide the element + animation */
background-color:#000;
opacity:0;
transition: all 0.5s ease 0s;
}
.box:hover:after {
/* Show the overlay on hover */
opacity:0.5;
}
/* For the demo */
.box {
width:200px;
height:200px;
background-color:red;
}
<div class="box"></div>

Answer 2

You can set the overlay to
position: absolute;
top: 0;
bottom: XXpx;
left: 0;
right: 0;
where XX is the footer height, then it will cover the whole card and leave the bottom x pixels free. You can also use % values instead of px.
If you want the overlay to contain text you need to put it into an extra div that you can then use as overlay.
I made a simplified version here https://jsfiddle.net/0L9fL1pj/

Answer 3

Been looking for a similar solution and since this thread never got a proper answer (neither proposed answer got me where I wanted and I doubt) but I got some important clues here and I thought I'd provide my current solution so anyone who has a similar problem can benefit.
I made a simple demo here: https://jsfiddle.net/Tdesign/2ynuajk0/14/
HTML:
<div id="imgBox2" class="shade">
<img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" width="350" height="335" loading="lazy" >
</div>
CSS:
#imgBox2 {
position: relative;
width: 500px;
}
.shade:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 500px;
background-color: rgba(0,0,0,0.5);
}