CSS. Цвет картинки как шрифт. Инверсия

#html #css #img

Проблема в следующем:
Есть текст-ссылка, цвет шрифта - синий, цвет фона - белый.

ссылка


Средствами CSS при наведении цвета меняются.

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


Перед текстом ссылки будет стоять иконка (ч/б или спрозрачностью).

ссылка


либо

ссылка


Существует возможность сделать так что бы картинка работала как маска?
То есть в конкретном примере нужно что бы при наведении курсора иконка меняла цвет
с синего на белый.
    

Ответы

Ответ 1

Придумал интересный костыль (при условии, что картинка однотонная по прозрачному):



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);
}
 + text


Ответ 2

Да, есть filter invert. Можно было бы залить span белым и инвертировать его, но я
сделал несколько по-другому:



span {
  display: inline-block;
  font-size: 100px;
  padding: .25em;
}

span:hover {
  color: white;
  background: black;
}

span:hover img {
  filter: invert(100%);
}
 + text


Ответ 3

Как паршивый (только для самых свежих браузеров), но вариант:

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


Пример:



.bg {
  display: inline-block;
  padding: 8px 8px 4px;
  background: #aaa;
}

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

  





Все фильтры.