The problem is as follows: There is a text link, the font color is blue, the background color is white.

<a href="#">ссылка</a>

With CSS, the colors change when you hover.

 a {color:blue; background:white;} a:hover {color:white; background:blue;}

Before the text of the link will be an icon (b / w or transparency).

 <a href="#"><img src="ico.png"/>ссылка</a>

or

 <a href="#"><img src="ico.jpg"/>ссылка</a>

Is it possible to make the picture work like a mask? That is, in a specific example, when you hover the cursor, the icon changes color from blue to white.

    3 answers 3

    I came up with an interesting crutch (provided that the picture is monotonous and transparent):

     a { display: inline-block; font-size: 100px; padding: .25em; color: #157EFB; background-color: white; } span { display: inline-block; overflow: hidden; } img { width: 128px; height: 128px; display: block; } a:hover { color: white; background: #157EFB; } a:hover img { transform: translateX(-100%); filter: drop-shadow(128px 0 0 white); } 
     <a><span><img src="//i.stack.imgur.com/K8JyZ.png" height=128 width=128></span> + text</a>

    • this is already a more interesting option) - Pavel
    • one
      Wow, cool invented! - Surfin Bird
    • probably the most flexible way would be to use hue-rotate to change color and brightness to create white ... - Pavel
    • @Pavel, try it. Like this option is good, no? - Qwertiy ♦
    • The very thing that is necessary) I wrote down the test jsfiddle.net/Ciberpol/so2zbmye Thanks for the right direction) - Pavel

    Yes, there is a filter invert. It would be possible to fill the span with white and invert it, but I did it a little differently:

     span { display: inline-block; font-size: 100px; padding: .25em; } span:hover { color: white; background: black; } span:hover img { filter: invert(100%); } 
     <span><img src="//i.stack.imgur.com/5XdlR.png" height=128 width=128> + text</span>

    • hm ... maybe try divs and background-blend-mode ... - Pavel
    • @Pavel, I already invented a more interesting crutch. Published a separate answer. - Qwertiy ♦

    As lousy (only for the most recent browsers), but an option:

     a:hover img { -webkit-filter: grayscale(100%) brightness(1000%); webkit: grayscale(100%) brightness(1000%); }

    Example:

     .bg { display: inline-block; padding: 8px 8px 4px; background: #aaa; } .bg:hover img { -webkit-filter: grayscale(100%) brightness(1000%); webkit: grayscale(100%) brightness(1000%); } 
     <div class="bg"> <img src="https://s.imgur.com/images/imgur-logo.svg"> </div>

    All filters .

    • one
      1. webkit => filter. 2. Swap the prefix and normal notation. 3. Something strange decision with 1000% ... - Qwertiy ♦
    • So it is not at all. This method will just make the picture black and white. - Pavel
    • It seems quite normal support, well, except for Edge12-. - Qwertiy ♦
    • @Qwertiy to make a picture of blue white? There seems to be no other way. - Surfin Bird
    • Oh .. But I did not think that ... - Qwertiy ♦