Two sprites on same position: how to make this happen?

Question

I have a site where are two news items on the home page. They both have the same image, so people can click to read more. So all standard stuff. Now, I have a problem. The two images are, as said, the same sprite and are seperated as they are standing beneath a different article, that is logical too. Now, I want to create the same effect on both images. If both hovered, they have to change to a different sprite, but this won't happen now. On one sprite, it is positioned good (so it looks like the color changes, a-technical people can't understand that it is an image), but on the other sprite, the hovered sprite positions itself above the read more button...

How can I make these two even, so that they are positioned correctly and not above or beneath the read more image?

The CSS:

.home article {
    background: url("images/readmore.png") no-repeat scroll left 250px transparent;
    float: left;
    padding: 15px 15px 45px;
    width: 300px;
}

.home article .readmore:hover {
    background: url("images/icon-readmore-sprite.png") no-repeat scroll 5px 3px transparent;
}

The HTML:

<article>
    <div class="entry-content">
    <a rel="bookmark" title="..." href="....">
    <p>......</p>
    <span class="readmore" title="read">read further</span>
    </a>
    </div>
</article>

PS: If I do this:

.home article:hover {
    background: url("images/icon-readmore-sprite.png") no-repeat scroll 5px 3px transparent;
background-position: 340px 250px;
}

Then it will position correctly, but if I hover, is just looks like it is clicked. It goes to left and down, like clicked on a button...

Answer 1

You have to understand the basics of CSS sprites method.

You should follow this example

http://www.24development.cz/examples/css-sprites/sprite.html

Please view the source and shift the image sprite position according to your image data.

This also hels you to avoid problems with preloading all images.

Let me know if this works for you.