Salut, je cherche à faire un effet de transition, avec du JQUERY, et j'ai du mal à trouver précisément ce que je cherche (image qu'on survole disparaît vers le bas, pendant qu'autre prend sa place en venant du haut).
Voilà en gros, lors du survol de 3 illus, j'ai placé mon image en hover.
Celle-ci est donc remplacée au survol de mon image. J'aimerais adoucir l'effet de transition avec JQUERY, mais bon, je ne dois pas avoir les bons mots clefs...
HTML
<ul>
<li class="un"><a href="lien.html" title="Xx"></a></li>
<li class="deux"><a href="lien.html" title="Xx"></a></li>
<li class="trois"><a href="lien.html" title="Xx"></a></li>
</ul>
Css
li.un a:hover, li.un a:focus, li.un a:active{background:#fff url(image.jpg) no-repeat left -108px;}
li.deux a:hover, li.deux a:focus, li.deux a:active{background:#fff url(image.jpg) no-repeat left -208px;}
.un{background:url(image.jpg) no-repeat left top;top:50px;}
.deux{background:url(image.jpg) no-repeat left -206px;margin-top:20px;}
Auriez-vous une piste?:rateau:
Voilà en gros, lors du survol de 3 illus, j'ai placé mon image en hover.
Celle-ci est donc remplacée au survol de mon image. J'aimerais adoucir l'effet de transition avec JQUERY, mais bon, je ne dois pas avoir les bons mots clefs...
HTML
<ul>
<li class="un"><a href="lien.html" title="Xx"></a></li>
<li class="deux"><a href="lien.html" title="Xx"></a></li>
<li class="trois"><a href="lien.html" title="Xx"></a></li>
</ul>
Css
li.un a:hover, li.un a:focus, li.un a:active{background:#fff url(image.jpg) no-repeat left -108px;}
li.deux a:hover, li.deux a:focus, li.deux a:active{background:#fff url(image.jpg) no-repeat left -208px;}
.un{background:url(image.jpg) no-repeat left top;top:50px;}
.deux{background:url(image.jpg) no-repeat left -206px;margin-top:20px;}
Auriez-vous une piste?:rateau: