Faire apparaître un div en passant sur une image

Sujet résolu

11 janvier 2018 à 18:20:51

Bonjour, je rencotre un problème pour faire apparaitre une bulle a coté de mon image. Voici mon html

  <!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Greenpeace</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
        <link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">
    </head>
    <body>
        <main class="maindonnee">
            <div id="logo2">
            <nav>
                <ul>
                    <a href="index.html"><li>Accueil</li></a>
                    <li class="pageactive">Données</li>
                    <li>Les signes</li>
                    <li>Agir</li>
                    <li>Contact</li>
                </ul>
            </nav>
            </div>
            <div class="contenu">
            <h1>Données</h1>
            <div class="entete2">
                <h3>Emissions de gaz à effet de serre</h3>
                <p>Les émissions annuelles de GES sont plus élevées que jamais. En 2010, elles ont atteint 49
                    gigatonnes d’équivalent CO2. La hausse des émissions s’accélère: +2,2% par an de 2000 à
                    2010, contre +1,3% par an entre 1970 et 2000. <br/>
                    Les énergies fossiles et l’industrie ont représenté 78% des émissions entre 1970 et 2010.</p>
            </div>
                <h4>Les secteurs les plus émetteurs de GES sont :</h4>
                    <div class="flex-container">
                        <div><img src="image/t%C3%A9l%C3%A9chargement%20(1).jpg"/></div>
                        <div class="deux"><img src="image/image_1.jpg"/></div>
                        <div class="trois"><img src="image/tormans-geel1.jpg"/></div>
                        <div class="quatre"><img src="image/industrie.jpg"/></div>
                        <div><img src="image/Agriculture-foret-et-developpement-rural_large.jpg"/></div>                        
                    </div>
                    <div class="bulle1">Transport <br/>14%</div>
                    <div class="bulle2">Production d’énergie <br/>35%</div>
                    <div class="bulle3">Batiment <br/>6%</div>
                    <div class="bulle4">Industrie <br/>21%</div>
                    <div class="bulle5">Agriculture <br/>et forêt <br/>24%</div>
                <h4>Les principaux pays émetteurs sont :</h4>
                <h4>Quelques chiffres :</h4>
            </div>
        </main>
    </body>
</html>

voici mon css

.flex-container{
    padding-top: 30px;
    display: flex;
    height: 600px;
    justify-content: space-between;
}
.flex-container div img{
    width: 350px;
    height: 200px;
}
.flex-container .deux, .flex-container .quatre{
    align-self: center;
}
.flex-container .trois{
    align-self: flex-end;
}
 /*--------bulles--------*/
.bulle1, .bulle3, .bulle4{
    background-color: white;
    width: 150px;
    border-radius: 100%;
    text-align: center;
    padding-bottom: 52px;
    padding-top: 52px;
    position: absolute;
 
}
.bulle2, .bulle5{
    background-color: white;
    width: 150px;
    border-radius: 100%;
    text-align: center;
    padding-bottom: 42px;
    padding-top: 42px;
    position: absolute;
}
.bulle1{
    top: 68%;
    left: 17.5%;
}
.bulle2{
    top: 89%;
    left: 37.5%;
}
.bulle3{
    top: 126%;
    left: 46%;
}
.bulle4{
    top: 89%;
    right: 37.5%;
}
.bulle5{
    top: 68%;
    right: 17.5%;
}

le but est que toute les bulles sont caché et que quand je passe sur une image la bulle correspondante doit appraitre. voici une image de ce que je veux quand tout est afficher:

merci d'avance

AliasDmc

11 janvier 2018 à 18:47:32

Bonjour,

En gros , il faut remanier ton code HTML

<div class="flex-container">
  <div><img src="image/t%C3%A9l%C3%A9chargement%20(1).jpg"/><div class="bulle bulle1">Transport <br/>
  14%</div></div>
  <div class="deux"><img src="image/image_1.jpg"/><div class="bulle bulle2">Production d’énergie <br/>
  35%</div></div>
  <div class="trois"><img src="image/tormans-geel1.jpg"/><div class="bulle bulle3">Batiment <br/>
  6%</div></div>
  <div class="quatre"><img src="image/industrie.jpg"/><div class="bulle bulle4">Industrie <br/>
  21%</div></div>
  <div><img src="image/Agriculture-foret-et-developpement-rural_large.jpg"/>
<div class="bulle bulle5">Agriculture <br/>
  et forêt <br/>
  24%</div></div>
</div>

Ajoute ces css

.bulle{display:none}
.flex-container > div {position:relative}
.flex-container > div:hover .bulle{ display:block; }

Il faudra repositionner tes bulles

Normalement cela devrait marcher

Pour faire plus propre au niveau code html, j'utiliserais figure et figcaption:

<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Une superbe photo">
    
  <figcaption>Une légende pour cette photo</figcaption>
</figure>

-
Edité par AliasDmc 11 janvier 2018 à 18:50:51

Découvrez les Css avec la zonecss.fr

bloumax

11 janvier 2018 à 18:59:39

C'est super ça marche j'ai juste du enlever la ligne 2 du css car les bulles ne se plaçaient pas bien

merci beaucoup bonne soirée