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...

May I suggest using `article:hover span` in CSS, this way, when you however over the article block the span will change. You can make the span a block level element and alter it from there, much cleaner than using this dodgy background positioning yet will look the exact same. — Matt Kieran, Oct 09 '12 at 11:26
Thanks for your advice. How can I make it correctly then? It looks not bad now, but it is not perfect. It goes some what left and down... — user1717526, Oct 09 '12 at 11:29
If you can show us a screenshot or something I'm sure we'd be able to help. — Matt Kieran, Oct 09 '12 at 11:30

score 1 · Accepted Answer · answered Oct 09 '12 at 11:35

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.

score 0 · Answer 2 · answered Oct 09 '12 at 11:48

From what I can see, this is all you need. Use a small say 32x32 image (or whatever size it is) and just position it in the bottom right.

article a {
    display: block;
    background: grey url('small.png') bottom right no-repeat;
}

article a:hover {
    background: red url('small-hover.png') bottom right no-repeat;
}

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

2 Answers2