Custom stars – with CSS

As custom stars are not fully supported yet – i have come up with a pure CSS-solution in my theme, might be helpful for others:

This is an example with thumbs-voting (2 images).
I use images with a size of 64px x 64px and scale them to 32px x 32px.

.mytheme .post-ratings img {
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: url('img/voting-thumbs-up.gif') no-repeat;
	background-size: 100%;
	width: 32px;
	height: 32px;
	padding-left: 32px;
	float: left;
}

.mytheme .post-ratings img:hover {
	background-image: url('img/voting-thumbs-up-full.gif');
}

.mytheme .post-ratings img:nth-of-type(2) {
	background-image: url('img/voting-thumbs-down.gif');
}

.mytheme .post-ratings img:hover:nth-of-type(2) {
	background-image: url('img/voting-thumbs-down-full.gif');
}