How to remove the background image border when on hover? - html

Question

I have a card with an image header. When on hover of the card, I'd like to change the non-image part background color. Code as follows:
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
height: 500px;
}
.card-image {
display: block;
position: relative;
}
.card:hover {
background-color: grey;
}
img {
display: block;
width: 100%;
height: 200px;
background-size: cover;
}
.container {
padding: 0 16px;
}
<div class="card">
<div class="card-image">
<img style="background-image: url(https://www.w3schools.com/howto/img_avatar.png);">
</div>
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
I use a background image as the image here because I need the background-size: cover effect, but as hovering on the card, you can see a border being added to the image due to it's actually a background image, I wonder how I can get rid of the border?
EDIT: the border isn't that obvious:

Answer 1

You are using background-image attribute, you should use the style on a <div> tag instead (or any other tag you with display:block), since this is an a background image not an image, I think this is caused by default browser behavior for not providing src attribute, which would be considered as 404 error for the image, not sure if this is the case here, here is a working snippet:
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
height: 500px;
}
.card-image {
display: block;
position: relative;
}
.card:hover {
background-color: grey;
}
.img {
display: block;
width: 100%;
height: 200px;
background-size: cover;
background-image: url(https://www.w3schools.com/howto/img_avatar.png);
}
.container {
padding: 0 16px;
}
<div class="card">
<div class="card-image">
<div class="img"></div>
</div>
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>

Answer 2

The problem is that you're using the img HTML element with a background-image CSS declaration. Two possible solutions:
1) Keep the img element, add a src attribute, and use the object-fit declaration.
HTML:
<div class="card-image">
<img src="https://www.w3schools.com/howto/img_avatar.png">
</div>
CSS:
img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
}
2) Remove the img element (and declaration) and apply the background-image declaration to the .card-image element.
HTML:
<div class="card-image"></div>
CSS:
.card-image {
background-image: url("https://www.w3schools.com/howto/img_avatar.png");
background-size: cover;
height: 200px;
}