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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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>Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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.
EDIT: added the center play button path (just copied the SVG from the referenced page + its viewbox) and changed opacity when hovered.
#youtube-remote,
#youtube-remote .youtube-remote-container {
display: flex;
justify-content: center;
align-items: center;
}
#youtube-remote svg {
position: absolute;
opacity: 0.8;
}
#youtube-remote:hover svg {
opacity: 1;
}
#youtube-remote:hover .play-outer {
fill: red;
}
<div id="youtube-remote">
<a href="https://www.youtube.com" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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 68 48">
<path class="play-outer" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"/>
<path d="M 45,24 27,14 27,34" fill="white"/>
</svg>
</div>
</a>
</div>All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0