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 :
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:
css:
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.
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 ~ pne 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.