Осветление и затемнение картинки при наведении с помощью CSS без скриптов делаем за два шага.
1. Добавить в CSS файл:
/*Осветление картинок при наведении*/
#imgosv a img, #imgosv img {opacity:0.3;}
#imgosv a img:hover, #imgosv img:hover {opacity:1.0;}
/*Затемнение картинок при наведении*/
#imgzat a img, #imgzat img {opacity:1.0;}
#imgzat a img:hover, #imgzat img:hover {opacity:0.3;}
2. Картинки разместить между div со специальным стилем:
<div id="#imgosv"><img alt="" /></div>
или
<div id="#imgzat"><img alt="" /></div>
Еще вариант
Картинке прописываем class=»imglogo»
.imglogo { filter: grayscale(100%); opacity: 0.8 }
.imglogo:hover { filter: grayscale(0%); opacity:1; }