Bonjour à tous, 

j'ai une image sur laquelle se trouve une opacité et du texte. 

au survol de la souris j'aimerais que l'opacité ainsi que le texte s'efface. 

Je vois pas du tout comment je pourrais faire ... 

Merci d'avance pour votre aide :) 

<img src="https://zupimages.net/up/18/08/r51g.png" id="Gandalf" alt="Gandalf">
 <p class="contenu">Reward <span>1000</span><br />
            golden coins</p>


  

#Gandalf
{
  opacity:0.6;
}

#Gandalf:hover
{
  opacity:1;
  
}

.contenu
{
position: absolute;
top:45px;
left:110px;
background-color: white;
border-radius: 15px;
font-size: 40px;
width: 250px;
text-align: center;
padding:15px  
}

  
 

Bonjour, enfin re, vu que tu as déjà un post plus bas, sur ce que je t'ai donné dans l'autre post tu rajoute ceci dans le css

#contenu:hover
{
  opacity:0;
   
}

Merci ça fonctionne effectivement. 

Le seul soucis c'est que le texte disparait quand ma souris le survol mais je souhaite que le texte disparaisse quand ma souris est sur l'image c'est-à-dire: 

Normal: 

On voit la photo opaque avec le texte par dessus 

Au survol de l'image  : 

On voit la photo qui n'est plus opaque et le texte n'est plus là 

bon alors en repartant de ton code de base et en bidouillant.

span
{
  color: orange;
}
 
 
 
#fond {
background:url('https://zupimages.net/up/18/08/r51g.png') no-repeat top left;
position:absolute;
width:500px;
height:573px;
z-index:1;
opacity: 0.6;
}

#contenu {
position:relative;
top:0;
left:0;
margin-top: 250px;
margin-left: auto;
margin-right: auto;
background-color: white;
opacity: 0.7;
border-radius: 15px;
font-size: 40px;
height:100px;
width: 220px;
text-align: center;
 
 
}

.txt1{

    position: relative;
    padding-top: 575px;
}
#contenu:hover
{
  opacity:0;
   
}
#mask1{
    padding-top: 1px;
    width: 500px;
    height: 572px;
    background-color: red;
    opacity: 0.7;
}
#mask1:hover{
opacity:0;
}

<section>
         
    <div id="conteneur">
            <div class="TheWizard">
                            
             <div img src="https://zupimages.net/up/18/08/r51g.png" id="fond" alt="Gandalf">

                <div id="mask1">  
                  <div id="contenu">Reward <span>1000</span><br />
                            golden coins
                  </div>
                </div>
            </div>

                 
              <div  class="txt1">
                The Wizard<br />
                Small description..
              </div>
            
             </div>            
    </div>
</section>

Bonsoir merci pour votre réponse mais je comprends pas le principe du mask1 et contenu. 

Pour comprendre votre réponse j'ai copier/coller le code dans codepen mais ça m'affiche juste mon texte pas mis en forme comme si il n'y avait pas de css étrange...

Ce qui me dérange c'est que je souhaite que le texte qui est sur mon image disparaissent alors que je survole que l'image. 

J'ai fais un nouveau code, qui dit : 

-Quand je survole l'image elle se met en opacité 1 

-et quand je survole mon texte qui est sur l'image, il se met en opacité 0 

l'idée est que mon texte se mette en opacité (sans avoir besoin de survoler le texte) juste quand je survole mon image, malheureusement ce n'est pas le cas. 

J'ai un peut regardé c'est parce que codepen à du mal a gèrer la taille de la police en px, c'est vrais que tu devrais la passer en "em" .

Alors ce que j'ai fait, dans l'idée je suis parti de ton code de base, tu avais déjà l'id "contenu" qui te servait à afficher ton texte, je l'ai englobé dans un ensemble de la taille de l'image (mask) qui lui, serras invisible si tu enlève son background-color et son opacity.

Après à cet ensemble j'ai appliqué un :hover ce qui fait que, des que tu passe sur le mask il disparait.

Au passage j'ai oublié d'enlever "#contenu:hover", tu peut le faire il n'a plus de raisons d'être.

Test sur une page html, enregistre la, et vois comment ça se comporte en offline sur les différent navigateurs existant.

-
Edité par exen 12 août 2018 à 14:03:11