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

Do you want the icons to change their lines color ? Or do you want to whole image to get gray ? — mttetc, Jan 12 '22 at 16:58
So... I'd like every part of the image that is white to turn to a slightly darker shade of white, or even grey. The issue i'm having is the whole box that it's in is turning grey instead of just the image. Even though all 4 of the images have fully transparent backgrounds — , Jan 12 '22 at 17:01

mttetc · Answer 1 · 2022-01-12T17:02:35.390

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

edited Jan 12 '22 at 17:02

answered Jan 12 '22 at 16:57

mttetc

711
5
12

1

`filter: invert(50%);` could be more suitable because `grayscale` has no effect on white images. [browser compatibility](https://caniuse.com/css-filters). – Tom Jan 12 '22 at 17:05
Unfortunately neither of these two methods have worked for me and the images still do the same thing. Thanks for the help though guys – Jan 12 '22 at 17:19
Could you update your post with svgs ? We'll work from there – mttetc Jan 13 '22 at 09:52

score 0 · Answer 2 · answered Jan 12 '22 at 22:13

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.

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

2 Answers2