[Résolu] Balise qui en change une autre par takcraft202 - page 1

Bonjour

Je travaille sur une petit"petite" page html css, pour le projet d'ISN, et je souhaiterais ajouter un effet avec des images. Quand je els survolle, un texte apparait dessus. ça, c'est déjà fait. Mais le problème est que j'aimerais que les autres images à coté dispariasse, et que celle-ci se place tout seule à gauche. voici le HTML:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Essais</title>
</head>
<body>
	<div class=" modsimg _bo ">
            <a href="bonus.html#slide33">
              <img class=" image _bp " src="images/essai.jpg" alt="Alt text" />
              <div class=" normal _br ">
                <div class=" text _q "></div>
              </div>
              <div class=" hover _bq ">
                <div class=" text _q ">Mods</div>
              </div>
            </a>
        </div>
        <div class=" mapsimg _bo ">
            <a href="bonus.html#slide31">
                <img class=" image _bp " src="images/essai.jpg" alt="Alt text" />
                <div class=" normal _br ">
                  <div class=" text _q "></div>
                </div>
                <div class=" hover _bq ">
                  <div class=" text _q ">Maps</div>
                </div>
            </a>
        </div>
</body>
</html>

et le CSS:

.modsimg {
 position: relative;
 width: 250px;
 margin-right: 25px;
 margin-top: 25px;
 float: right;
 margin-bottom: 25px;
}
.modsimg .image {
 display: block;
 width: 100%;
 height: auto;
}
.modsimg .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}
.modsimg .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
.modsimg:hover .hover {
 opacity: 1;
 width: 350px;
}
.modsimg .normal {
 transition: .5s ease;
}
.modsimg:hover .normal {
 opacity: 0;
}
.modsimg .hover {
 background-color: rgba(0,0,0,0.5);
}





.mapsimg {
 position: relative;
 width: 250px;
 margin-left: 25px;
 margin-top: 25px;
 float: left;
}
.mapsimg .image {
 display: block;
 width: 100%;
 height: auto;
}
.mapsimg .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}
.mapsimg .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
.mapsimg:hover .hover {
 opacity: 1;
 width: 350px;
}
.mapsimg .normal {
 transition: .5s ease;
}
.mapsimg:hover .normal {
 opacity: 0;
}
.mapsimg .hover {
 background-color: rgba(0,0,0,0.5);
}

L'objectif est que quand je survole la div mapsimg, elle se place à droite, et la div modsimg devienne invisible. pareil pour modsimg.

takcraft202

5 avril 2020 à 11:07:24

AliasDmc

6 avril 2020 à 12:14:00

Bonjour takcraft202

Je te propose :

.main:hover > *:not(:hover) {
  display:none
}

Exemple: https://codepen.io/Zonecss/pen/yLyvdjb

Découvrez les Css avec la zonecss.fr

6 avril 2020 à 13:05:24

ça fonctionne super, mais j'avoue ne pas trop comprendre comment cela fonctionne?? cela est tout de même important

AlainPré

7 avril 2020 à 10:21:31

:hover indique un élément survolé par la souris

:not(:hover) indique donc un élément non survolé par la souris

Il faut noter aussi la présence de > qui indique un inclusion directe (sans éléments intermédiaires)

Donc en gros ce sélecteur veut dire : un élément non survolé par la souris et inclus dans un élément lui même survolé.

Alain - Linkedin

7 avril 2020 à 11:07:18

ça marche nickel et j'ai tout comrpis! c'est parfait merci !!

Balise qui en change une autre

Balise qui en change une autre

Supprimer

Modérer

Signaler le message aux modérateurs