<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%);
}

<div class="hide-box">
<label><input type="checkbox">
<h6>Кликните</h6></label>
<div class="hide-content">
Тут спрятан блок
</div>
</div>

.hide-box .hide-content {
    display: none;
}
.hide-box input:checked ~ .hide-content {
    display: block;
}
.hide-box input {
    display: none;
}
.hide-box h6 {
    cursor: pointer;
}