CSS3 фильтр или другим способом?

Question

[Даник Грачёв]

пример фильтра
:hover{
-webkit-filter: grayscale(100%);} - т.е. в серый цвет переход
А как сделать, чтобы можна было задать цвет при наведении на изображение?
допустим красный

Answer 1

[outcastik]

filter: grayscale(0);
filter: sepia(0);
filter: saturate(1);
filter: hue-rotate(0deg);
filter: invert(0);
filter: opacity(1);
filter: brightness(1);
filter: contrast(1);
filter: blur(0px);
наглядно посмотреть: http://css3.bradshawenterprises.com/filters/
Цветом при наведении заливает блок, можно изменить значение альфа-канала. Например
:hover{
background-color: rgba(255,255,255,0.3);}
Или я не так понял?

Comments

[Даник Грачёв]

portfolio > li figure > a{-webkit-filter: grayscale(100%);}
portfolio > li:hover figure > a{-webkit-filter: grayscale(0%);}
вот такой css у меня.

я просто не могу понять как сделать
portfolio > li figure > a{-webkit-filter: grayscale(0%);}
portfolio > li:hover figure > a{opacity:50%; /*задать какой-нибуль цвет, не только серый */}

[outcastik]

filter: hue-rotate(0deg); лучшее что можно посоветовать,
можно создать блок сверху залить его цветом с альфой 0.6, а при ховере альфа 0, но тут надо позиционировать их друг под друга, лишний геморрой...