[Résolu] Pseudo-classe Checked

Bonjour
Je me bats avec une peudo-class "checked". Je cherche à faire passer ma classe vignette en opacity 0 lorsque ma check box est checked. Mon code fonctionne avec la classe "wordcloudbas" mais pas avec la classe "vignette". J'avoue que vos avis seraient les bienvenus. Voici mon code allégé (j'ai laisse le wordcloudbas qui fonctionne, lui)

  <input type="checkbox" id="check_1" name="check" class="r_check">
  <label for="check_1" class="on_check">
    <img class="vignette" src="entree.jpg" alt="s_image_001.jpg">
  </label>
  <img class="wordcloudbas" src="wordcloudbas.png" alt="">

.vignette{
width : 400px;
height : 50px;
margin-left : 312px;
margin-top : 750px;
position : absolute;
z-index:10;
display:block;
opacity:1;
}

.r_check{
opacity:0;
}

.wordcloudbas{
position:absolute;
display:block;
width:1024px;
height : 768px;
top:100px;
left:0;
right:0;
margin:0 auto;
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.r_check:checked ~ .wordcloudbas {
 opacity:0;
-webkit-transform:scale(1,0);
-moz-transform:scale(1,0);
-ms-transform:scale(1,0);
-o-transform:scale(1,0);
transform:scale(1,0);
}

.r_check:checked .vignette{
opacity:0;
}

J'avoue qu'un petit coup de pouce serait une aide précieuse !
Modifié par Bilboquette (19 Apr 2017 - 13:55)

Tu es génial Laurent !
Merci infiniment !