Как убрать границу фонового изображения при наведении курсора?

Question

У меня есть карточка с заголовком изображения. При наведении курсора на карту я хотел бы изменить цвет фона части, не являющейся изображением. Введите следующий код:

.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>

Я использую фоновое изображение в качестве изображения здесь, потому что мне нужен эффект background-size: cover, но при наведении курсора на карточку вы можете увидеть добавляемую границу к изображению из-за того, что это на самом деле фоновое изображение, интересно, как я могу избавиться от границы?

EDIT: граница не так очевидна:

Answer 1

Вы используете атрибут background-image, вместо этого вы должны использовать стиль в теге <div> (или в любом другом теге с display:block), поскольку это фоновое изображение, а не изображение, я думаю, что это вызвано поведением браузера по умолчанию из-за отсутствия атрибута src, что будет считаться ошибкой 404 для изображения, не уверен, что это так, вот рабочий фрагмент:

.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

Проблема в том, что вы используете элемент img HTML с объявлением background-image CSS. Два возможных решения:

1) Сохраните элемент img, добавьте атрибут src и используйте объявление object-fit.

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) Удалите элемент img (и объявление) и примените объявление background-image к элементу .card-image.

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;
}