Probleme de roll hover sur mon site perso

Salut a tous !

J'ai un petit souci sur mon son site perso que je viens de terminer (soyez indulgent je suis graphiste)

J'ai mis des simples roll hover sur mes galeries d'image mais au survol l'image disparait avant de s'afficher comment corriger se bug ? j'ai du oublier un truc

une de mes galeries en html :

        <div id="gallery">
		<div id="photo"><a href="images/online/gra7.jpg" rel="prettyPhoto[gallery1]" title="" id="onlinephoto18"></a></div>
		<div id="photo1"><a href="images/online/gra8.jpg" rel="prettyPhoto[gallery1]" title="" id="onlinephoto19"></a></div>
		<div id="photo2"><a href="images/online/gra9.jpg" rel="prettyPhoto[gallery1]" title="" id="onlinephoto20"></a></div>
		<div id="photo3"><a href="images/online/gra10.jpg" rel="prettyPhoto[gallery1]" title="" id="onlinephoto21"></a></div>
		<div id="photo4"><a href="images/online/gra11.jpg" rel="prettyPhoto[gallery1]" title="" id="onlinephoto22"></a></div>
		<div id="photo5"><a href="images/online/gra12.jpg" rel="prettyPhoto[gallery1]" title="" id="onlinephoto23"></a></div>
        </div>

Et mon css :

#onlinephoto18{
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra7_thumboff.jpg);
}

#onlinephoto18:hover {
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra7_thumb.jpg);
}

#onlinephoto19{
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra8_thumboff.jpg);
}

#onlinephoto19:hover {
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra8_thumb.jpg);
}

#onlinephoto20{
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra9_thumboff.jpg);
}

#onlinephoto20:hover {
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra9_thumb.jpg);
}

#onlinephoto21{
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra10_thumboff.jpg);
}

#onlinephoto21:hover {
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra10_thumb.jpg);
}

#onlinephoto22{
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra11_thumboff.jpg);
}

#onlinephoto22:hover {
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra11_thumb.jpg);
}

#onlinephoto23{
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra12_thumboff.jpg);
}

#onlinephoto23:hover {
display:block;
width: 305px;
height: 190px;
background-image: url(../images/online/gra12_thumb.jpg);
}

et voici le lien de la page en question http://rddesign-book.com/offline.html

Je vous remercie d'avance

Bonjour,

tu es graphiste donc je vais être tout doux

ton code n'a aucun problème : l'image ne disparaît pas, le blanc que tu voies correspond juste au temps de chargement de ta deuxième image.

Ta technique me semble inappropriée puisque tu te retrouves à charger deux images, via css, dans un lien vide. Sémantiquement, il n'y a donc aucun contenu ! De plus, en doublant tes images tu doubles le poids.

Etant donné que le but recherché semble n'être qu'un effet d'opacité, pourquoi ne pas plutôt insérer tes images dans tes liens via une balise <img /> ? Tu pourrais reproduire ton effet en css basique, du genre

a img{opacity:0.8} 

et sur le hover mettre l'opacité à 1. De plus, tu aurais peu de css puisqu'ils s'appliqueraient à toutes les images concernées, au lieu d'avoir un pâté de css pour chaque image comme c'est le cas actuellement..

Soit-dit en passant, ton site sera beau graphiquement, mais prends soin d'optimiser tes images car elles sont dans l'ensemble très, très lourdes..

Bon courage !

ok merci je prend note de tes conseils je vais modifier cela