"swap image" en css

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
Modifié par yves_web (26 Jun 2008 - 10:39)

Salut,

yves_web a écrit :
Il y a quelque chose a faire ?

Nous fournir une page en ligne, ça serait bien.