Как сделать чтобы при наведении на объект он становился цветным?

Question

[SamWalton]

Подскажите, как сделать (в идеале) аналогично этим вариантам. При наводке оно интересно подсвечивается.
Чтобы зайдя на сайт сразу было видно способы оплаты.

spoiler

Comments

[KazeZlat]

Уточните ваш вопрос сначала, что именно вы не можете сделать?

[Александр Севиринов]

при наведении проявление цвета?

[Роман Филиппов]

Если бы вы правильно сформулировали вопрос, то ответ можно было бы с легкостью найти в гугле, способ оплаты в данном случае не причем.

Answer 1

[Роман Филиппов]

Вставляем в footer.php список со изображениями.

<ul class="footer-pay">
<li class="pay-1">1 способ</li>
<li class="pay-2">2 способ</li>
<li class="pay-3">3 способ</li>
</ul>

В стилевой файл пишем:

.pay-1{
background: url(img/some1.jpg);
background-size: contain;
}
.pay-2{по аналогии с первым}
.pay-3{по аналогии с первым}

.footer-pay{
list-style:none;
display:inline-block;
float:left;

.footer-pay li{
-webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
        filter: grayscale(100%);
transition-duration:0.3s;
}

.footer-pay li:hover{
-webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
     -o-filter: grayscale(0%);
        filter: grayscale(0%);
}