CSS Image swap on hover jumps with border


A little background. I have searched and searched. There is plenty of answers for ADDING a border on hover but none that I found where the table has a 1px white border style whether hovering or not. The image jumps on hover. I have tried box-sizing: border-box and adding same color border to hover style. This site is old and I was not the original developer. It is built using tables instead of divs. We are transitioning them to a new site but they want this one updated in the mean time with new images. One black and white and another color. When you mouse over the black and white, they want it to turn to the color one. We are using a sprite that is 400px (w) by 240px (h). The images are 120px high so just changing position for the hover effect.

<td class="bottom right left stlouis"></td>


.stlouis {
    width: 400px;
    height: 120px;
    background-image: url(../images/stlouis.jpg);
    background-position: 0 0;

.stlouis:hover {
    background-position: bottom;

Thank you for your help!

By : lsumarkb


In case anyway is looking for a fix on this, display: block; fixed the issue.

By : lsumarkb

This video can help you solving your question :)
By: admin