Подскажите, как с помощью CSS, при наведении курсора, заменить цвет PNG-иконки (например, такой:
) с серого на красный.
-
1сделать ещё одну иконку красного цвета и менять её при наведении– ArchDemon14 окт 2018 в 15:42
-
Если png, то цвет background можно менять по :hover– Vitaliy Stop_RU_war_in_UA14 окт 2018 в 18:06
3 ответа
В CSS3 это возможно с помощью свойства filter
:
img:hover {
-webkit-filter: sepia(1) hue-rotate(320deg) saturate(10);
filter: sepia(1) hue-rotate(320deg) saturate(10);
}
<img src="https://i.stack.imgur.com/rbcA9.png">
Цепочка фильтров такова (порядок важен!):
sepia
- по сути, делает изображение монохромным с рыжим оттенком;hue-rotate
- вращение цветового круга до нужного оттенка;saturate
- насыщенность цвета.
Чтобы какой-либо цвет превратить в белый:
body { background: #ccc; }
img:hover {
-webkit-filter: grayscale(100) brightness(200);
filter: grayscale(100) brightness(200);
}
<img src="https://i.stack.imgur.com/jjpgK.png">
Здесь цепочка следующая:
grayscale
- обесцвечиваем изображение;brightness
- устанавливаем яркость с заведомо завышенным значением.
-
я дико извиняюсь, а как из красного, при наведении, сделать белый цвет картинки 1 авг 2020 в 8:27
-
Подготовьте отдельный спрайт с иконками разных цветов (как показано ниже). В 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>
Поддержка браузерами: 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>