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?
transitionstyle rules, then add your own rules to overwrite those (assuming they're in a default style and you can't just remove them)#social a, #social a:hover { transition:none !important; }like Johanes explains below. Also, there are some misalignment to adjust on the Y axis for your sprites when hovered: The hovered values for Y axis are-58pxfor all, instead of-60px(except for#instagram a:hoverwhich correct value is-57px).