Bonjour,
Je cherche à faire afficher sur des images des blocs textes lors du survol par le pointeur.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 <div class='info1'> <img src='https://i.imgur.com/1aCAUZA.jpg' style='width:250px;height:250px;'><div> If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.<br> Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well. </div></div> <div class='info1'> <img src='https://i.imgur.com/4lhitJi.jpg' style='width:250px;height:250px;'><div> You can only upload images to codepen website servers if you have a Starter, Developer or Super pro account subscription. <br>This means you have to pay to store your images on Codepen. You have a maximum file size limit on individual files that you can upload on Codepen. </div></div>
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 .info1{ display: inline; } .info1:hover { cursor: pointer; } .info1 div{ display: none; position: absolute; top: 2px; padding:3px; width:250px; height: 250px; background-color: rgba(255, 255, 255, 0.75); } .info1:hover div { display:block; cursor: pointer; z-index:1000; }
Le résultat sur codepen : https://codepen.io/jdp83/pen/xxRzgYo
Le problème est visible : le bloc s'affiche toujours sur la première image.
Merci de me donner une solution.
Partager