How can I make it change color when hovering over an object?

Question

Layout

Tell me how to do (ideally) similarly to these options. When hovering, it is interestingly highlighted.
So that when you go to the site you can immediately see the payment methods.

spoiler

Answer 1

We insert a list with images into 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>

In the style file we write:

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

Answer 2

It turned out that the reason was in the Urlmanager rules.
Dashes in urls do not fall under the \w+ rule
Helped on the forum

Answer 3

try this config
www.yiiframework.com/doc-2.0/guide-installation.html
My config on local machine looks like this

server {
  listen   127.0.0.1:80;
  server_name  portal www.portal;
  
  root home/portal/public_html/web;
  index index.php index.html;

  log_not_found off;
  charset utf-8;

  access_log  logs/portal-access.log  main;

  location ~ /\. {deny all;}

  location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php; } }

  location = /favicon.ico {
  }

  location = /robots.txt {
  }

  location ~ \.php$ {
    if (!-e $document_root$document_uri){return 404;}
    fastcgi_pass 127.0.0.1:9054;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }
}