Ways to alter the SVG's color upon hovering above the image:

I need help getting the YouTube logo to turn red when I hover over an image with a link.

Currently, the color change only occurs when hovering over the logo itself, but I want it to happen when hovering over the entire image.

You can see an example of what I am trying to achieve by hovering over the video at the bottom of the page: https://support.google.com/youtube/answer/9057455?hl=fr

This is the code I am using:

#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.010.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-.170-.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.090 9.82-.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.170-.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>

htmlcsssvghyperlink

Answer №1

If you want to customize the appearance of the play button on the image, consider adding the :hover pseudoclass directly onto the image. Using 'fill' instead of background-color for SVGs will ensure that only the path is properly filled in.

To make the middle triangle white permanently, simply add another path to the SVG and fill it with white.

For the center play button path, you can copy the SVG from the referenced page and adjust the opacity when hovered. Here's the CSS code snippet for styling:

#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;
}

And here's the HTML code snippet for implementing the play button:

   
 <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 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem: NgFor is failing to render the data

Hey there! I'm working on a project that involves Spring Boot, SQL, and Angular. I have set up one-to-many relationships, but I'm struggling to display the second object in my component's HTML. Here's my current setup: @Component({ se ...

htmlangularspringspring-bootdisplay

Maximize margin usage by extending to full width

Check out this JS Fiddle example Is there a way to align these boxes in the example so they are the same size and positioned next to each other on one line? Additionally, how can we ensure that if the window is resized and one box drops down, it will be c ...

htmlcsslist

Enable the use of custom tags containing hyphens in the kses filter for WordPress

I developed a specialized Wordpress plugin that enables users to incorporate custom HTML element tags (such as <my-element>) into the content of a Post. This allows users without the unfiltered_html capability to utilize predefined custom tags. The ...

phphtmlwordpress

Padding provides varying padding for the top and bottom sections

html { font-size : 10px; } body { text-align : center; color : #9da8c1; font-family : sans-serif; background : #013f81; } h1 { font-size: 4rem; } #img-div { background : #2a5590; width : 600px; margin : 0 auto; pad ...

htmlcss

IE9 causing issues with Angularjs ng-route - views fail to display

I am new to AngularJS and currently working on developing an application using AngularJS along with Coldfusion for database data retrieval. However, I am facing compatibility issues specifically with IE9 (which is the default browser in my office). The ap ...

javascripthtmlangularjscoldfusion

html table displaying incorrect data while using dynamic data in vue 3

example status 1 Hello there! I'm trying to create a table (check out example status 1 for guidance). Here's the code snippet I am using: <table> <tr> <th>Product</th> <th>Price</th> <th>Av ...

htmlvue.jshtml-tablevuejs3

What is the best way to eliminate the unwanted white space below the footer on a webpage

I'm working on a website and I've noticed that at the end of the footer, there is a large block of white space that shouldn't be there. I've tried adjusting the HTML and CSS code, but nothing seems to fix the issue. Strangely, other pag ...

htmlcssfooter

Arranging divs within a wrapper, ensuring that one of them displays a vertical scrollbar when the content exceeds the space available

I'm currently facing a challenge with defining the height of the description box in order to achieve the layout shown. I am trying to find a solution without relying on javascript. https://i.stack.imgur.com/3j278.png At present, the wrapper and titl ...

css

Prevent the display of HTML tags in ASP.NET

Looking for a way to prevent a specific HTML tag from being printed in my ASP.NET project view file, whether through a printer or to a PDF file. Are there any HTML or CSS attributes that can help achieve this? How should they be configured? I have alread ...

c#htmlcssasp.net

Discover an Easy Way to Scroll to the Bottom of Modal Content with Bootstrap 5 on Your Razor Page

Currently, I am developing a web application that utilizes Razor Pages and Bootstrap 5 modals to showcase dynamic content. The challenge I am facing is ensuring that the content inside the modal automatically scrolls to the bottom when the modal opens or w ...

javascripthtmlbootstrap-5razor-pages

I am looking to enhance my CSS menu by incorporating a sub menu feature

I am having trouble getting my submenu to slide to the right horizontally. I have tried various CSS menus, but they are causing issues with my webpage. Here is the HTML code for the menu: <li class="widget"> <h2>Categories</h2> & ...

cssdrop-down-menumenu

Tips for incorporating an SVG image into a Next.js application while being able to dynamically change its color

I currently have 13 apps within the app directory, and I am attempting to display an icon in a component. While I was successful in achieving this, I am having trouble changing the color of the SVG image. Is there a way to modify the coloring of the SVG ...

reactjssvgnext.jsnext-images

Struggling with CSS issues in ASP.NET 4.6

For the past few months, I've been diligently working on a project that suddenly hit a snag today. Upon inspecting my website, I noticed that all my button sizes appear to be uniform. I typically use Chrome's developer tools to troubleshoot my we ...

c#cssvisual-studio-2017jquery-3asp.net-4.6

The image will remain hidden until it is fully loaded and ready to be displayed

I am currently working on a script that involves displaying a loading icon until an image is fully loaded, at which point the loading icon should disappear and the image should be shown. Unfortunately, my current code is not working as intended. Here is a ...

javascriptjqueryhtmlcss

trouble with react-table's default height and flexible design

I am facing an issue with my React table configuration. I have set up scrollable columns and header following a similar example here: https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310 In the table styles, I have specified a height like this: ...

cssreactjsreact-table

How to focus on a dynamically changing input box in Vue

In my form, users can input an email address and click a plus button to add another input box for a new email address. These input boxes are created by iterating over an array, so when the user clicks on the plus icon, a new entry is added to the array. W ...

javascripthtmlvue.jsvuejs2

Utilizing a responsive design with a bootstrap grid system, featuring expandable columns for

After creating a bootstrap grid page, I am facing an issue with the layout on mobile screens. My problem arises when trying to reorder the cards properly for mobile view. Here is my current logic: <div class="row"> <div *ngFor="let col of [1, ...

htmlangularresponsive-designbootstrap-4bootstrap-grid

What is the best way to have an image fill the remaining space within a 100vh container automatically?

I have a container with a height of 100vh. Inside it, there is an image and some text. The text's height may vary based on the screen size and content length. I want the text to occupy its required space while the image fills up the remaining availabl ...

htmlcss

Displaying a <div> element within a :before pseudoelement

Implementing the use of :before to insert an icon font into a div for a CSS3 hover state. I am looking to incorporate a div within the <a> tag in order for both elements to function as links: <a href="#set-4" class="column product hi-icon product ...

htmlcss

Discovering what is impeding the rendering of a webpage

On a particular website, the server rendering happens quickly but there seems to be a delay on the client side which is causing the HTML to be rendered few seconds later. I suspect it could be due to some setTimeout function or similar; are there any tool ...

javascripthtml