Подмена цвета PNG при наведении мыши

Question

Подскажите, как с помощью CSS, при наведении курсора, заменить цвет PNG-иконки (например, такой:
 ) с серого на красный.

MoloF · Answer

Поддержка браузерами: caniuse.com/#search=mask

div {
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-image: url('https://image.flaticon.com/icons/svg/1086/1086563.svg');
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #000;
}

div:nth-child(1) { background: linear-gradient(#e74c3c, #f1c40f); }
div:nth-child(2) { background-color: #1842de; }
div:nth-child(3) { background-color: #ffff00; }
div:nth-child(4) { background-color: #3498db; }
div:nth-child(5) { background-color: #9b59b6; }
div:nth-child(6) { background-color: #2ecc71; }

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

mymedia · Answer

Подготовьте отдельный спрайт с иконками разных цветов (как показано ниже). В CSS-стилях зафиксируйте размеры блока. Задайте для блока фоновое изображение. У псевдокласса :hover пропишите смещение этого изображения равное высоте (или ширине) картинки. В результате получится элемент, который чуть-чуть изменяется при наведении указателя мыши.

.i-folder {
  height: 42px;
  width: 57px;
  background: url(https://i.stack.imgur.com/jjpgK.png);
}
.i-folder:hover {
  background-position: 0px 42px;
}

<div class="i-folder"></div>

UModeL · Answer

В CSS3 это возможно с помощью свойства filter: img:hover { -webkit-filter: sepia(1) hue-rotate(320deg) saturate(10); filter: sepia(1) hue-rotate(320deg) saturate(10); }

Цепочка фильтров такова (порядок важен!): sepia - по сути, делает изображение монохромным с рыжим оттенком; hue-rotate - вращение цветового круга до нужного оттенка; saturate - насыщенность цвета. Источник Чтобы какой-либо цвет превратить в белый: body { background: #ccc; } img:hover { -webkit-filter: grayscale(100) brightness(200); filter: grayscale(100) brightness(200); }

Здесь цепочка следующая: grayscale - обесцвечиваем изображение; brightness - устанавливаем яркость с заведомо завышенным значением.

Подмена цвета PNG при наведении мыши

3 Answers

Add your own answers!

Ask a Question