Bonjour,
J'ai une image avec des informations dessus
Html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <body> <div class="container"> <img src="integration_gandalf.png" alt="Gandalf"> <div id="label"> <h1> <span style="color: black">reward </span><span style="color:orange">1000</span> <br /> <span style="color:black;">golden coins</span> </h1> </div> <div class="caption">Gandalf</div> </body>
J'ai mis en place ce code css avec toute la mise en place de l'image telle qu'elle est avant:
Et je voudrais qu'au survol de cette image l'id label disparaisse donc je pense avec un diplay:none et que le texte soit déplacé un peu plus en bas... donc avec une modif des propriétés top: 320px; et left:90px; Mais je ne vois pas du tout comment intégrer ces informations sur img:hover...
Code : 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
33
34
35
36
37
38
39 .container { position: relative; width: 320px; height: 240px; } #label{ position: absolute; display: inline; top: 20%; left: 18%; text-align: center; width:90%; padding-left:3.0em; padding-right:3.0em; border-radius: 10px; opacity: 0.7; background-color: #E6E6FA; } .caption { position: absolute; top: 320px; left:90px; color: white; font-size: 5em; } img{ opacity: 0.5; } img:hover{ opacity: 1.0; }
Partager