Probleme décalage tableau et hover.

Bonjour,

bonjour,

j'ai crée un tableau dans lequel les objets sont ...des images et pas des écritures. Le but est de se servir des images proprement sans avoir à régler pour chacune leur position.

Hors quand je passe sur l'une des images avec la souris, la bordure grossie, c'est normale c'est ce que j'ai demandé en Hover, mais ce qui est gênant c'est que ça décale les autres images le temps que je reste sur l'image. Comment y remédier ?

Voici le code

HTML :

<table id="fruit">
<tr>
<td class="pomme"></td>
<td class="poire"></td>
</tr></table>


CSS :

#fruit
{
position:absolute;
left:300px;
}

#fruit td
{
width:95px;
height:95px;
list-style:none;
border: 2px solid #CCFFFF;
margin:3px;
-webkit-border-radius:5px;

}

#fruit td.pomme
{
background-image:url('pomme.png');
}

#fruit td.poire
{
background-image:url('poire.png');
}

#fruit td:hover
{
opacity:0.5;
cursor:pointer;
border:3px solid #CCFFFF;
}

Merci d'avance.