The code below shows the use of a sprite that should normally display images in B&W and when the mouse is hovered over the images, they become colored, but without showing the transitions between the images. It would only change color.
What can be done to not show the transitions?
This appears in the sidebar of our website:
https://materiaincognita.com.br/
The code is in this text file as follows:
<head>
<style>
#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;
}
</style>
</head>
<body>
<div id="social">
<ul>
<li id="facebook"><a title="Facebook" href="https://www.facebook.com/materia.incognita" target="_blank" rel="noopener"></a></li>
<li id="pinterest"><a title="Pinterest" href="https://br.pinterest.com/materiaincog" target="_blank" rel="noopener"></a></li>
<li id="bluesky"><a title="Bluesky" href="https://bsky.app/profile/materia-incognita.bsky.social" target="_blank" rel="noopener"></a></li>
<li id="youtube"><a title="YouTube" href="https://www.youtube.com/user/materiaincognita" target="_blank" rel="noopener"></a></li>
<li id="instagram"><a title="Instagram" href="https://www.instagram.com/materia.incognita/" target="_blank" rel="noopener"></a></li>
</ul>
</div>
</body>
However, if I put my code in "CodePen dot io" it works perfectly as I want.
The problem seems to be inside WordPress system…
Any idea to solve the problem?
There is a css rule for a in your website that contains transition settings.
To avoid the transition, add transition: none; to the css rule for #social a. If that still doesn't work, add !important, i.e. transition: none !important;