Rechercher : dans
Par :

Effet de "swap image" en ccs

Dernière réponse le 30 jun 2008 à 09:24:51 yves_web, le 27 jun 2008 à 11:08:44 
 Signaler ce message aux modérateurs

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
Y
Sur terrain plat, de simples buttes font effet de collines.

Configuration: Windows 2000
Firefox 2.0.0.14

Meilleures réponses pour « effet de "swap image" en ccs » dans :
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Inverser le texte dans Word (effet miroir) VoirS'il est possible d'effectuer une rotation du texte avec Word (icône zone de texte, puis format / orientation du texte), celui-ci ne permet en revanche pas de faire des opérations de symétrie. La solution consiste donc à insérer une image contenant...
PHP - Génération d'images VoirPrérequis PHP permet de créer des images au format GIF à l'aide d'une librairie de fonctions prévue à cet effet. La librairie permettant de créer et manipuler des fichiers graphiques se nomme GD, ainsi, pour pouvoir utiliser ces fonctions il faut...

1

doctormad, le 27 jun 2008 à 14:46:46

Salut,

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

Tu pourrais pas mettre ta page en ligne et donner un lien ?

Répondre à doctormad

2

 yves_web, le 30 jun 2008 à 09:24:51

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, Y
Au royaume des bicyclettes, les tricycles sont rois.

Répondre à yves_web
Collection CommentÇaMarche.net