Bonjour à tous! Je rencontre un petit souci quant à l'affichage d'un texte lors du survol d'une image voici mon code html et une photo (qui expliquera surement mieux ma demande), je souhaiterais que ma class "reward_fellows1" s'affiche lors du survol de ma class "img-responsive1" (également pour reward_fellows2 et img-responsive2), j'ai tenté beaucoup de choses (visibility hidden :hover etc) toutefois je bloque là dessus; quelqu'un saurait il m'expliquer comment je peux résoudre ce problème ? (je débute tout juste en html/css.. ^^) Merci d'avance vous seriez d'une aide précieuse !

<div class="container"> 
    <div class="card-deck">
        <div class="card" style="width: 18rem;">
            <img class="img-responsive1" src="http://images.innoveduc.fr/integration_gandalf.png" alt="Card image cap">
              <div class="reward_fellows1">Reward <span>1000</span> gold coins</div>
                    <div class="card-body">
                        <p class="card-text">The Wizard</p>
                        <p class="card-text">Small description..</p>
                    </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="img-responsive" src="https://img05.deviantart.net/9163/i/2015/071/0/8/bilbo_baggins__drawing__by_shaynajreddick-d8ledxe.jpg" alt="Card image cap">
                    <div class="card-body">
                    <p class="card-text">Hobbit#3</p>
                    <p class="card-text">Small description..</p>
                </div>
        </div>        
        <div class="card" style="width: 18rem;">
            <img class="img-responsive2" src="http://fc00.deviantart.net/fs70/f/2011/355/e/9/e973224d851b0b5deb6355098c135fa8-d4jrw2g.jpg" alt="Card image cap">
               <div class="reward_fellows2">Reward <span>250</span> gold coins</div>
                    <div class="card-body">
                    <p class="card-text">Yummy Dwarf</p>
                    <p class="card-text">Small description..</p>
                </div>
        </div>
    </div>    
</div>

-
Edité par AbcAbc6 15 septembre 2019 à 20:16:55

Salut,

.card img:hover + div

ou plus simplement encore :

.card:hover  div

Il n'y a pas grand intérêt à utiliser des classes si c'est pour les avoir toutes différentes.
Donc img-responsive pour toutes tes images et reward_fellow pour toutes tes div serait plus logique.

Pas de styles dans les balises.

Bonjour Clara, "html/css" ne convient pas comme titre de sujet. J'ai remplacé le titre par ton sous-titre.

Attention pour la prochaine fois.