How to color text inside of icon

Question

I wanted to ask if there is a way I can add color to the icon I linked down below if I hover over it?

https://www.google.ch/search?q=linkedin&source=lnms&tbm=isch&sa=X&ved=0ahUKEwilrciPwpPVAhUEWhQKHYX7CxcQ_AUICigB&biw=1920&bih=949#tbm=isch&q=linkedin+black+icon&imgrc=eCztS3qV_QYT9M

For example how can I make the color only of the text "in" red if I hover over it? I think you have to do it in combination with a photo editor but I dont really know how. Thanks for help

This is my code I tried.

<section id="icons">
   <a href="#"><img src="youtube.png" class="youtube" alt=""></a>
</section>


.youtube {
 background-image: url(youtube.png);
 width: 5vw;
 position: absolute;
 }

.youtube:hover {
 background-image: url(youtubehover.png);
 width: 5vw;
 position: absolute;
 }

Answer 1

Here's a quick example: https://jsfiddle.net/oowjwLru/

This can be easily accomplish by placing a colored div behind the image, and then using the following simple jQuery to automatically hide the div and show it when the mouse is over:

Html:

<img id="imgLogo" src="http://www.iconsdb.com/icons/preview/black/linkedin-4-xxl.png" alt="icon" height="100" width="100" style="position:absolute:top:-100px;">
<div id="divColor" style="background-color:red;width:60px;height:60px;position:absolute;left:30px;top:28px;z-index:-1;">
</div>

Javascript/jQuery:

$(document).ready(function(){
    $("#divColor").hide();
    $("#imgLogo").mouseover(function() { 
        $("#divColor").show();
    });
});

Answer 2

You can use a svg (no problems with resizing) and change the fill color at hover

Html:

<svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <path d="M30.071,27.101v-0.077c-0.016,0.026-0.033,0.052-0.05,0.077H30.071z"/>
    <path id="linkedin" fill="#000" d="M49.265,4.667H7.145c-2.016,0-3.651,1.596-3.651,3.563v42.613c0,1.966,1.635,3.562,3.651,3.562h42.12   c2.019,0,3.654-1.597,3.654-3.562V8.23C52.919,6.262,51.283,4.667,49.265,4.667z M18.475,46.304h-7.465V23.845h7.465V46.304z    M14.743,20.777h-0.05c-2.504,0-4.124-1.725-4.124-3.88c0-2.203,1.67-3.88,4.223-3.88c2.554,0,4.125,1.677,4.175,3.88   C18.967,19.052,17.345,20.777,14.743,20.777z M45.394,46.304h-7.465V34.286c0-3.018-1.08-5.078-3.781-5.078   c-2.062,0-3.29,1.389-3.831,2.731c-0.197,0.479-0.245,1.149-0.245,1.821v12.543h-7.465c0,0,0.098-20.354,0-22.459h7.465v3.179   c0.992-1.53,2.766-3.709,6.729-3.709c4.911,0,8.594,3.211,8.594,10.11V46.304z"/>
  </g>
</svg>

Css:

svg:hover #linkedin { 
  fill: red; //or #ff0000
}

In the svg the path must have the id "linkedin" to change color

<path id="linkedin" fill="#000" d="M49.265,[...],10.11V46.304z"/>

Answer 3

The best way to do this is to create two seperate images. One for when the icon is in its default state, and the other for when it is in its hover state. In the hover state, change the color to whatever you like, in your case red, so that when the user puts their mouse over it, they see that color.

Here is an example of some CSS to do this:

#icon {
background-image: url(../images/example_default.png)
width: 150px;
height: 150px;
position: absolute;
}

#icon: hover {
background-image: url(../images/example_hover.png)
width: 150px;
height: 150px;
position: absolute;
cursor: pointer;
}

:hover changes what the image will look like when the user hovers over the icon. Notice the background images are different, one for each state the icon could be in. I also added "cursor: pointer" assuming this icon will be a button of some sort.

Answer 4

I had to make the text inside the icon blank using magic wand with paint.net. I Also deleted the white color of the edges. With the following code I changed the color from the text or the content inside the icon from white to red when I hover over it

<section id="icons">
    <a href="#"><img src="yourimage.png" alt=""></a>
</section>


#icons img {
   width: 5vw;
   padding: 0;
}

#icons img:hover {
   background-color: red;
   border-radius: 100%;
   overflow: hidden;
}

Answer 5

Since the image is black and white, you can use this.

.red:hover {
  filter: contrast(50%) sepia(100%)  saturate(100) hue-rotate(-10deg);
}

<img class="red" src="http://www.iconsdb.com/icons/preview/black/linkedin-4-xxl.png">