Can't get background to work properly with the CSS hover function

Question

so i'm very new to web development and can't find anything online about the issue i'm having. I'm basically just trying to change a hover function on 4 logo's i've inserted into the web page i'm working with. All image are PNG's with a plain white colour and a transparent background (I converted it myself in Photoshop). However, i'm trying to use the hover function on each image so it turns to a grey(ish) shade but for some reason the white colour doesn't change but the background colour does, when I only want the white part of the image to change to the slightly darker shade. Any help would be much appreciated.

Here is the HTML (just in case it's needed)

<!-- social media bar -->
    <div class="socials">
        <!-- instagram link -->
        <div class="instaBox" id="socialBox">
            <a href="#">
                <img src="/assets/instaLogo.png" alt="Instagram Logo" class="instaLogo" id="socialsLogo">
            </a>
        </div>
        <!-- tiktok link -->
        <div class="tiktokBox" id="socialBox">
            <a href="#">
                <img src="/assets/tiktokLogo.png" alt="tiktok logo" class="tiktokLogo" id="socialsLogo">
            </a>
        </div>
        <!-- youtube link -->
        <div class="youtubeBox" id="socialBox">
            <a href="#">
                <img src="/assets/youtubeLogo.png" alt="YouTube Logo" class="youtubeLogo" id="socialsLogo">
            </a>
        </div>
        <!-- vimeo link -->
        <div class="vimeoBox" id="socialBox">
            <a href="#">
                <img src="/assets/vimeoLogo.png" alt="Video Logo" class="vimeoLogo" id="socialsLogo">
            </a>
        </div>
    </div>

And here is the CSS

/* social media bar */
.socials{
float: left;
width: 20%;
height: 100%;
}

#socialBox{
float: left;
width: 10%;
overflow: hidden;
margin-left: 5%;
margin-right: 5%;
}

#socialsLogo{
border: none;
width: 100%;
}

#socialsLogo:hover{
background: #b0b0b0;
}

I'll add an image of the logo's on the web page as well so you can see the issue i'm getting.

Logo's normally Logo's with the hover effect

Answer 1

According to your screenshot, your icons apparently have transparency.
I also assume your html body or parent element has a black background color.

You could actually just change the opacity to emulate a gray icon color.

As an alternative you could also change contrast.

.socialLink:hover .icon-img {
  filter: contrast(0.5);
 }

body {
  background-color: #000;
}

.socialBox {
  text-align: center
}

.socialLink {
  background-color: #000;
  color: #fff;
  display: inline-block;
  text-align: center;
  width: 1em;
  height: 1em;
  font-size: 5em;
}

.socialLink img {
  width: 100%;
}

.socialLinkFontAwesome {
  color: #fff;
}

.socialLink:hover .icon-img {
  filter: contrast(0.5);
}

.socialLink:hover .icon-img2 {
  opacity: 0.5;
}

.socialLinkFontAwesome:hover {
  color: #999;
}


/* just for adjusting example icon sizes */

.svg-inline--fa {
  height: 1em;
  font-size: 0.75em;
  vertical-align: 0.125em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>

<!-- tiktok link -->
<p class="socialBox">
  <a class="socialLink tiktokLink" href="#">
    <img class="icon-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
    /></a>

  <a class="socialLink tiktokLink2" href="#">
    <img class="icon-img2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
    /></a>
  <a class="socialLink socialLinkFontAwesome"><i class="fab fa-tiktok"></i></a>

</p>

Recommendations
Avoid duplicate element IDs. Better add your ids to class attribute like this:

        <div class="socialBox tiktokBox">

You might also consider to use a svg/vector based icon library like fontAwesome, feather-icons etc. (see third icon example )
These libraries can simplify your development tasks and offer a superior rendering quality, since they are scalable.

Answer 2

You can use filter

If your goal is to change the icons lines colors, then use svg images and change their color

img { transition: filter .25s ease-out }

img:hover { filter: grayscale(.5) }

<img src="https://placekitten.com/200/300" />