CODEWITHSUNDEEP
csswordpresscss-selectorshoversprite
Marcos
Marcos

Reputation: 3

CSS Sprites in WordPress

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?

Upvotes: 0

Views: 47

Answers (1)

Johannes
Johannes

Reputation: 67778

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;

Upvotes: 0

Related Questions