Creating pixel-perfect pixie rollover graphics

So one of the problems with css pixie rollovers is that the graphic you use needs to be perfect in order to work right - otherwise you will see a noticeable jump when you hover. 

As a quick refresher, here is how a pixie rollover works:

1) you have a container element in your html.  For this exercise, we’ll make it an anchor.  The idea is that we will use this container as a viewport to see a background graphic, which is bigger than the viewport, in different positions based on whether or not you are hovering with the mouse (or touching on a touch device).  Here’s a graphic in case that didn’t make sense.

Your background image looks like this (notice this is all one image):

2) in your css, you of course need to make your anchor a block element, so you can set the size.  Set the size as half the height of the image you are using.  Then you set the background, positioned top left by default, and bottom left on hover:

.button {
display: block;
width: 165px;
height: 70px;
background-image: url(images/pixie.png);
background-repeat: no-repeat;
background-position: top left;
}

.button:hover {
background-position: bottom left;
}

So in order to get this to work right, you have to have an image that has two similar items (in this case the blue button), positioned perfectly - otherwise you will notice a shift in the image on hover. Here’s how I do it:

You will probably want to set this on 720p and view it in full screen