Question 49488 in Photoshop Question posted in
The official user guide can be found here.

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

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

Tags:

2

Answers


  1. 0

    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" />
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search