CSS Sprites issue - Size Changes

Question

I've ran into this problem and i'm not sure how to solve it, perhaps you can help me.

I want to make a Question Mark as a navigation item. And on hover a circle with 128x128px should appear over it.

But as you can see i have an image that is a 110x110px circle and my hover state circle is 128x128px.

I kinda wanted to make something like this: http://www.theflov.com/en/services

Now when i hover over it, the circle moves a little bit because of the different sizes, do you guys have any idea how to solve this?

<header class="design-header">
    <ul>
       <li class="what-we-do"><a href="#whatwedo" class="hidetext">What we do</a></li>
    </ul>
</header>

.design-header {

background-color: #000;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
height: 800px;  

.what-we-do{

    width:110px;
    height:110px;

    background-image: url('../img/sprites.png');
    background-position:-10px 0px;

    margin:187px auto;


            &:hover {
        cursor: pointer;    
        width:128px;
        height: 128px; 
        background-position:-3px -110px;

    }   

Answer 1

Try making the "what-we-do" container initially 128 x 128 and center the non-hover-state image in that container using background-position.

It will take a bit of trial and error to get the two image states to appear right on top of each other when hovered, but keeping the container the same size is going to be essential for you.