How to change the color of the SVG when hovering over the image?

November 4, 2021

I have an image (with a link) and the YouTube logo in the center.

I will want the YouTube logo to be red when I hover the image.

Currently it is not working. I have to hover over the logo for the color to change, I want it to change as soon as I hover over the image.

Here is an example (hover over the video at the bottom of the page) :

https://support.google.com/youtube/answer/9057455?hl=fr

Here is my code :

#youtube-remote,
#youtube-remote .youtube-remote-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#youtube-remote svg {
    position: absolute;
    background-color: #ffffff;
    color: #000000;
}

#youtube-remote svg:hover {
    background-color: #ffffff;
    color: #ff0000;
}

<div id="youtube-remote">
  <a href="https://www.youtube.com" target="_blank">
    <div class="youtube-remote-container">
      <img src="https://img.youtube.com/vi/ZLga1SIE1HA/maxresdefault.jpg" width="1280" height="720" alt="" loading="lazy">
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
        <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
      </svg>
    </div>
  </a>
</div>

>Solution :

Just add the :hover pseudoclass onto the image instead of the svg. Also, you should use ‘fill’ instead of background-color for svgs to properly fill in only the path 🙂

If you want the middle triangle to be white permanently (like in the link’s video), you’ll need to add another path to the svg and fill that with white.

#youtube-remote,
#youtube-remote .youtube-remote-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#youtube-remote svg {
    position: absolute;
}

#youtube-remote:hover svg {
    fill: red;
}

<div id="youtube-remote">
  <a href="https://www.youtube.com" target="_blank">
    <div class="youtube-remote-container">
      <img src="https://img.youtube.com/vi/ZLga1SIE1HA/maxresdefault.jpg" width="1280" height="720" alt="" loading="lazy">
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 16 16">
        <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
      </svg>
    </div>
  </a>
</div>