Effet de "swap image" en ccs

Bonjour,
Bonjour,
Pour créer un effet de zoom au survol d'une image j'ai fait en css...
zoom1 {
width: 440px;
height: 400px;
background-image: url(zoom/1.jpg);
background-position: 0px -300px;
background-repeat: no-repeat;
margin: 0 auto;
}

.zoom1 p, .zoom1 a {
height: 400px;
display: block;
margin:0;
}

.zoom1 a:hover {
background-image: url(zoom/1.jpg);
background-repeat:no-repeat;
cursor:help;
}
idem pour les images 1,2,3,4 et 5 sauf que bien sûr l'image est 2.jpg, 3.jpg etc.
Dans le code de la page j'ai :



<!-- première image-->
<div class="zoom1">
<a href="zoom/1.jpg" title="mon baratin"></a>
</div>



Et ça marche !
Le soucis c'est que si la souris est hors de la zone 1 par exemple, j'ai un espace entre 1.jpg et 2.jpg égal au reste de 1.jpg restant à afficher au survol.

Il y a quelque chose a faire ?

Question subsidiaire :
J'aimerais que au survol de 1.jpg celle ci ne se colle pas juste au dessus de 2.jpg, mais qu'il reste une petite marge.
J'ai bien pensé mettre un "border" après le "background" mais ça ne marche pas.

Bonne journée à tous,
Yves