Change color of transparent image on hover using CSS

Question

I am trying to change the a logo image (transparent png) from white to red with CSS. I do not know any JS, only html and CSS.

I have tried using css hover with color but it doesn't work. I used background-color, which works, but I don't want the background of the image to be red. I've searched but I don't think my search description is very good.

This is the html:

<body>
<div class="background-container">
<header>


<a href="index.html"><img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo"></a>

<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
    </ul>
</nav>
</header>

and the css:

    .logo {
     height: 30vh;
     margin: 1em;


     }

     .logo:hover {
     color: red;
     }

I can't upload the actual image so I'll upload a royalty free image. I want to color the planet red or blue or whichever color I want, on hover. The image also acts as the home button.

transparent image

You cannot change the color of an image with css. However, you can change directly the source on hover or you can use a `svg` version of your image and then change the `fill` color with css. You can see more [here for the first method](https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover) and [here for the second one](https://css-tricks.com/change-color-of-svg-on-hover/). — Valentin Duboscq, Jan 14 '20 at 16:42

score 1 · Accepted Answer · answered Jan 14 '20 at 16:58

You could do that using javascript or if you just want use css follow the steps as follow:

Add the new coloured image for the hover state:

<a href="index.html">
   <img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo">
   <img src="images/redImage.png" class="logo-hover">
</a>

Apply those styles to the CSS:

A .logo {
   height: 30vh;
   margin: 1em;
   display: block;
}

A:hover .logo {
   display: none;
}

A .logo-hover {
   display:none;
}

A:hover .logo-hover {
   display:block;
}

This method worked and was easiest for me to do with my limited experience, thanks! — Simon Lowes, Jan 15 '20 at 13:32

score 1 · Answer 2 · answered Jan 14 '20 at 17:01

This is possible with CSS filters buut they exact numbers will require some trial and error.

body {
  background: lightblue;
}

div {
  display: inline-block;
  width: 20vw;
  margin: 2vh;
}

img {
  max-height: 100%;
  width: 100%;
  display: block
}

img:hover {
  filter: invert(50%) sepia(100%) hue-rotate(290deg) saturate(500%);
}

<div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/clipart365150.png" alt="">
</div>

score 0 · Answer 3 · answered Jan 14 '20 at 17:00

Change the logo html to

<a class="logo" href="index.html">
  <img src="images/ReLiveLogoWHITE TRANSPARENT.png" alt="">
</a>

and then use this css

.logo {
  display: inline-block;
  text-decoration: none;
  background-color: transparent;
  height: 30vh;
  margin: 1em;
}
.logo:hover {
  background-color: red;
  text-decoration: none;
  cursor: pointer;
}
.logo img {
  border: 0;
}

Change color of transparent image on hover using CSS

3 Answers3