CSS-спрайты в WordPress ⇐ CSS

[Anonymous]

Приведенный ниже код показывает использование спрайта, который обычно должен отображать изображения в черно-белом режиме, и при наведении указателя мыши на изображения они становятся цветными, но без отображения переходов между изображениями. Это изменит только цвет.
Что можно сделать, чтобы переходы не отображались?
Это отображается на боковой панели нашего сайта:
https://materiaincognita.com.br/
В этом текстовом файле код находится следующим образом:

Код: Выделить всё

#social {
position: relative;
padding: 0px 5px 0px;
}

#social li, #social a {
display: inline-block;
position: relative;
width: 60px;
height: 56px;
}

#facebook {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -0 -0;
}

#pinterest {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -60px -0;
}

#bluesky {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -120px -0;
}

#youtube {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -180px -0;
}

#instagram {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -240px -0;
}

#facebook a:hover {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -0 -60px;
}

#pinterest a:hover {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -60px -60px;
}

#bluesky a:hover {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -120px -60px;
}

#youtube a:hover {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -180px -60px;
}

#instagram a:hover {
left: 0px;
background: url('https://materiaincognita.com.br/wp-content/uploads/2024/11/redes-sociais.jpg') -240px -60px;
}





[list]
[*][url=https://www.facebook.com/materia.incognita][/url]
[*][url=https://br.pinterest.com/materiaincog][/url]
[*][url=https://bsky.app/profile/materia-incognita.bsky.social][/url]
[*][url=https://www.youtube.com/user/materiaincognita][/url]
[*][url=https://www.instagram.com/materia.incognita/][/url]
[/list]

Однако, если я помещу свой код в "CodePen dot io", он будет работать отлично, как я хочу.
Похоже, проблема внутри системы WordPress…
Есть идеи по решению этой проблемы?

Подробнее здесь: https://stackoverflow.com/questions/792 ... -wordpress