Faire disparaitre deux éléments au survol d'une même image

**olivorel** · 10/09/2017, 16h00

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...

**NoSmoking** · 10/09/2017, 18h26

Bonjour,
regarde du coté du sélecteur d'adjacence « directe » + (plus) et du sélecteur d'adjacence « élargie » ~ (tilde) pour cibler ton élément sur le :hover de l'image.

**olivorel** · 11/09/2017, 17h41

ok merci beaucoup! Gràce à vous j'ai trouvé la solution!

Faire disparaitre deux éléments au survol d'une même image

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager