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

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 >
        <!-- instagram link -->
        <div  id="socialBox">
            <a href="#">
                <img src="/assets/instaLogo.png" alt="Instagram Logo"  id="socialsLogo">
            </a>
        </div>
        <!-- tiktok link -->
        <div  id="socialBox">
            <a href="#">
                <img src="/assets/tiktokLogo.png" alt="tiktok logo"  id="socialsLogo">
            </a>
        </div>
        <!-- youtube link -->
        <div  id="socialBox">
            <a href="#">
                <img src="/assets/youtubeLogo.png" alt="YouTube Logo"  id="socialsLogo">
            </a>
        </div>
        <!-- vimeo link -->
        <div  id="socialBox">
            <a href="#">
                <img src="/assets/vimeoLogo.png" alt="Video Logo"  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

CodePudding user response：

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" />

CodePudding user response：

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 >
  <a  href="#">
    <img  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr // /H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo WkSC PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB nB9zxwAAAABJRU5ErkJggg=="
    /></a>

  <a  href="#">
    <img  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr // /H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo WkSC PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB nB9zxwAAAABJRU5ErkJggg=="
    /></a>
  <a ><i ></i></a>

</p>

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

        <div >

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.