26851 sujets

CSS et mise en forme, CSS3

Bonjour,

Je voulais comprendre comment marchait exactement le sélecteur ~.

D'après ce que j'en ai compris ça permet de sélectionner toutes les balises dans une balise sans compté la première.

Par exemple :
div ~ p

ne prendra que les p dans les divs sauf le premier.

Alors que je voulais réaliser un petit bout de code pour déplacer un texte lorque nous sommes sur une image :

html:


<!doctype html>
<html lang="fr">
    <head>
        <title>UNSTOPABLE</title>
        <link rel="stylesheet" href="css/boutique.css">
    </head>
    <body>
            <section class = "object">
                <img src="images/watch.jpg"/>
                    <header class="deplace" >
                        <h2 >watch<h2>
                    </header>
            </section>
    </body>
</html>


css:


.object{
  position: relative;
   text-align: center;
 
}
 
.deplace{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
section img{
 
  width : 20%;
  transform: scale(1);
  transition: 0.2s ease-in-out;
  margin-left:0%;
 
}
 
 
section img:hover{
  opacity:0.5;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  transform: scale(1.1);
}
 
section img:hover ~ .deplace{
  left: 20%;
}



Je n'ai donc pas compris pourquoi le texte bougeait !


De plus si vous avez un moyen pour que ça marche sans JS et que je puisse mettre mon header avant mon image ce serrait sympa !

Merci de l'attention porté à mon problème.