Hover qui ne marche pas

[Melodiam]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://hells-kitchen.forumactif.com/t24-le-bestiaire#85

Description du problème

Bonsoir !!!


Voilà j'ai un petit souci avec un des codes que je travaille...
Lorsqu'on survole l'image, on doit voir apparaître le bloc blanc avec le texte.
Or là, comme vous pouvez le voir en cliquant sur le lien qui vous amène au poste, on voit directement le bloc/texte et l'image est en dessous.

Je n'arrive pas à voir d'où ça vient, si mon opacité est mal réglée ou quoi...

Voici le code en entier :

Code:

<style>.kisseu {  opacity: 0; width: 250px; height: 330px; transition-duration: 0.5s;  -moz-transition-duration: 0.5s;  -webkit-transition-duration: 0.5s;  -o-transition-duration: 0.5s; }.kisseuu {  width: 250px; height: 330px; }.kisseu:hover { opacity: 3; -moz-transition-duration: 0.5s;  -webkit-transition-duration: 0.5s;  -o-transition-duration: 0.5s; }.kisseua { width: 200px; padding: 5px; background-color: #fff; font: 9px; font-weight: 100; letter-spacing: 1px; color: #000; text-align: center; text-transform: lowercase; }.kisseub { width: 200px; height: 250px; padding: 5px; background-color: #fff; font: 9px; font-weight: 100; letter-spacing: 0px; color: #000; text-align: justify; text-transform: lowercase; overflow: auto; }</style>

<div style="padding: 20px; height:900px; overflow-y:scroll; overflow-x:hidden; overflow: auto;"><table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table></div></center>

Merci à vous !

[MlleAlys]

Bonjour,
Il y a certains endroits dans votre code css où il y a deux espaces, faussant les propriétés.
remarques bonus ^^ :
- la propriété font n'existe pas, il s'agit de font-size
- inutile de repréciser dans :hover la durée de la transition si elle n'a pas changé
Essayez le style suivant :

Code:

.kisseu { opacity:0; width:250px; height:330px; -moz-transition-duration:0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration:0.5s; transition-duration:0.5s; } .kisseuu { width:250px; height:330px; } .kisseu:hover { opacity:1; } .kisseua { width:200px; padding:5px; background-color:#fff; font-size:9px; font-weight:100; letter-spacing:1px; color:#000; text-align:center; text-transform:lowercase; } .kisseub { width:200px; height:250px; padding:5px; background-color:#fff; font-size:9px; font-weight:100; letter-spacing:0px; color:#000; text-align:justify; text-transform:lowercase; overflow:auto; }

[Melodiam]

Bonjour !

Merci pour tes conseils, je les appliquerai à l'avenir ahah
En attendant le style corrigé marche très bien, merci beaucouuuup !