:hover sur image css

Par Al1384, il y a 8 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gandalf</title>
<link rel="stylesheet" href="gandalf.css" type="text/css">
</head>

<body>
    <div class ="container">
        <img src="images/gandalf.png" alt="gandalf" class="image"/>

        <div class="middle"><p>
            reward<span> 1000
            </span><br>gold coins</p></div>

        <div class ="text">Gandalf</div>
    </div>

</body>

</html>

Voici le CSS associé.

.image{
opacity : 0.7;
}

.container:hover .image{
opacity : 1;
}

.middle{
background-color: white;
opacity: 0.6;
position:absolute;
top: 30px;
left: 40px;
border: 2px solid black;
border-radius: 10px;
width: 430px;
height: 150px;
}

p{
font-size: 60px;
text-align: center;
margin: auto;
}

.text{
font-size: 80px;
position: absolute;
bottom: 150px;
left: 120px;
color: white;
}

span{
color:orange;
}

Décrivez ici votre code ou ce que vous cherchez à faire

Mon problème c'est que j'aimerais faire disparaître les deux div(.text .middle), l'opacité de la photo(que j'arrive à faire) tout en faisant apparaître le div .text en bas de l'image(plus petit et au centre), au survol de l'image avec la souris.
Je débute en css et html,
merci de vos conseils et remarques.;)

3 réponses

MATTHEW PERRY, il y a 8 ans

Salut donc si j'ai bien compris tu veux afficher les div qui ont la class (.text .middle) au moment ou tu survol la photo?

Tu dois mettre par défaut tes div en display none pour qu'elle ne s'affiche pas si rien ne se passe.

Ensuite au hover (survol de l'element) tu les fais passer en display : block (block car ce sont des divs et de base elles sont en "block");

Comme exemple de css // Par defaut ton block sera caché .middle{ display : none; } //Au moment du survol de l'élement (ici c'est la div qui a la class "container") tu fais apparaitre ta div .middle en display block :-) .container:hover .middle{ display: block; }

PS : Essaie de mieux formuler tes phrases, sans vouloir être mauvais, j'ai du m'y reprendre à plusieurs fois avant de comprendre le sens :D

Et fais gaffe a ton indentation ;)

TokaLazy, il y a 8 ans

Salut

Pour afficher du texte au survole d'une image il suffi de mettre ton message dans l'attribut alt de ta balise img.
Pour ce qui est de l'apparition/disparition des blocks, le display:none; de @MATTHEW_PERRY est la bonne solution sauf qu'il faut le mettre au hover, et non de base (vu que tu veux que les messages partent au survol).

Al1384, il y a 8 ans
>Salut, merci pour la rapidité de vos réponses ;). Durant la journée j'ai trouvé ailleurs ce que j'étais venu chercher ici . >Je prends ton conseil "Matthew Perry", je débute, je peux que m'améliorer ;).Merci.