Как ограничить background-color за установленную картинку что бы цвет не вылезал за рамки самой картинки при наведении на него мышкой (:hover)

Question

я сделал такую структуру :

<div>
        <a href="https://vk.com/kslvladimr">
        <img class="vk" src="C:\Users\Kreker\Desktop\Сайт Киселева В.Т\Сайт для хостинга\image\gas-kvas-com-p-chernii-logotip-na-prozrachnom-fone-12.png" alt="">
        <span class="vh">VKontakte</span>
        </a>
    </div>

у меня получилось мое скачанное изображение, я отредактировал его по нужным размерам в CSS:

.vk {
    height: 25px;
    width: 45px;
    position: fixed;
    right: 700px;
    transition: all 0.3s ease;
    font-size: 14px;
    border-radius: 20px;
}

все хорошо, изображение меня устраивает вот только при следующей строке:

.vk:hover {
    background-color: brown;
}

я не могу контролировать размер цвета фона, я пытался сделать это разными способами, что бы цвет фона не выходил за рамку данной картинки но у меня не вышло, прошу, помогите кто знает (ToT)

Воспроизводимый пример (не от автора вопроса, как заготовка для уточнения!):

.test {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.vk {
  /*height: 25px;*/
  width: 45px;
  /*position: fixed;*/
  right: 700px;
  transition: all 0.3s ease;
  font-size: 14px;
  border-radius: 20px;
}

.vk:hover {
  background-color: brown;
}

<div>
  <a href="javascript:void(0)" class="test">
    <img class="vk" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/VK_Logo.png" alt="">
    <span class="vh">VKontakte</span>
  </a>
</div>

Answer 1

Логотип в изображении, которое вы используете, имеет меньшие размеры, чем само изображение. Измените в графическом редакторе размер холста изображения, чтобы холст был равен логотипу.

В коде ниже демонстрация вашей проблемы. Граница блока, где работает hover, обозначена зелёным:

body {
  background: #e6e6e6;
}

.container {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.vk {
  width: 45px;
  right: 700px;
  transition: all 0.3s ease;
  font-size: 14px;
  border-radius: 20px;
  border: 2px solid green;
}

.vk:hover {
  background-color: brown;
}

<div class="container">
  <img class="vk" src="https://img.icons8.com/?size=512&id=99262&format=png">
  <p>- Размер холста больше, чем размер логотипа</p>
</div>
<div class="container">
  <img class="vk" src="https://cdn-icons-png.flaticon.com/512/123/123736.png">
  <p>- Размер холста и логотипа одинаковы</p>
</div>

БЛОГ НА HUSL

Как ограничить background-color за установленную картинку что бы цвет не вылезал за рамки самой картинки при наведении на него мышкой (:hover)

Ответы (1 шт):