Bonjour tout le monde,
Dans la partie membre de mon site, je suis en train de réaliser une partie qui permettra aux membres de choisir un avatar parmi ceux que j'ai mis à disposition.
Avec du PHP, je vais simplement chercher les noms des fichiers dans un dossier que j'affiche grâce à une boucle for().
A l'intérieur de ma boucle for(), j'ai mon code HTML qui affiche les images :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <input type="radio" name="avatars" id="<?=$files;?>" style="display:none;" /> <label for="<?=$files;?>" class="affiche"> <img src="https://www.gwanda.ch/images/avatars/<?=$_POST['categorie'].'/'.$files;?>" class="image" alt="" /> <div class="texteAffiche">SELECT</div> </label>
Mon problème se trouve sur mon code CSS...
Voici mon
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 .affiche { position:relative; } .image { z-index:1; } .texteAffiche { color: #FFFFFF; text-shadow: 2px 2px 5px red; z-index:2; right: 10px; bottom: 10px; position: absolute; display: none; } .affiche:hover .texteAffiche { display: inline-block; visibility: visible; } input[type="radio"]:hover+label img { cursor: pointer; } input[type="radio"]:checked+label img { border: 5px solid #ADBC81; opacity: 0.5; }
Dans l'ensemble, ce code fonctionne parfaitement bien. Ce que je ne comprends pas du tout, c'est que sous IE et Chrome, je n'ai aucun souci, mais avec Firefox, j'ai un gros problème avec le texte qui s'affiche au survole de l'image. Sur le printscreen ci-dessous, mon pointeur cible la photo rouge (1e ligne, 2e image) et l'on voit bien le texte qui s'affiche sur l'image.
Maintenant, si je place le pointeur de ma souris sur la photo de la 2e ligne, 1e image (turquoise) , mon texte s'affiche sur la dernière image de la ligne du dessus.
Ce que je ne comprends pas, c'est que ce problème est uniquement avec Firefox, mais je n'ai pas ce problème si j'utilise IE ou Chrome.
Es-ce que dans mon code CSS il y a quelque chose qui pose problème? Est-ce que quelqu'un a une idée ou une correction ou autre à me donner?
Merci d'avance
Partager