Posez votre question Signaler

Effet de "swap image" en ccs

yves_web 325Messages postés 22 novembre 2007Date d'inscription 22 février 2012Dernière intervention - Dernière réponse le 30 juin 2008 à 09:24
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
Lire la suite 

Effet de "swap image" en ccs »

2 réponses
Réponse
+0
moins plus
Salut,

C'est pas très clair ton histoire ^^

Tu pourrais pas mettre ta page en ligne et donner un lien ?
yves_web- 30 juin 2008 à 09:24
Bonjour,
Excuse pour le retard de réponse, pb de connexion et je suis parti en province ce we, ou je n'ai pas de connexion.
Le site sur lequel je travaille n'est pas encore public, je te donne l'url en pv.
Bonne journée,
Ajouter un commentaire
Ce document intitulé « effet de "swap image" en ccs » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?