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:
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;
 
}
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...