title: Change color of transparent image on hover using CSS
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="background-container"&gt;
  &lt;header&gt;
  
  
  &lt;a href="index.html"&gt;&lt;img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo"&gt;&lt;/a&gt;
  
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>and the css:</p>
  
  <pre><code>    .logo {
       height: 30vh;
       margin: 1em;
  
  
       }
  
       .logo:hover {
       color: red;
       }
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/34ydJ.jpg" rel="nofollow noreferrer">transparent image</a></p>