Can I select css parent element?

I'm trying to create product selection by css using checkbox. My codes are here

.vfb-checkbox{
  width:180px;
  height:130px;
 background:url('http://ift.tt/1JGdy8W');
}
/* checkboxes */

.vfb-checkbox label {
                  cursor: pointer;
            display: block;
            position: relative;
  width:100%;
  height:100%;

        }
        
.vfb-checkbox label:before {  
            content: "";
      height:100%;
      width:100%;
            position: absolute;  
            left: 0;
        }
.vfb-checkbox label:hover{
  background:rgba(0,0,0,.7) url(http://ift.tt/1Qv2jFE)center center no-repeat;
}

        
.vfb-checkbox input[type=checkbox] {  
        display: none;
        }
        
        
   input[type=checkbox]:checked + label:before {  
            background: rgba(0,0,0,.4) url('http://ift.tt/1Qv2jFE') center center no-repeat;  
        }

<div class="vfb-checkbox">  
   
  <label for="check1"> 
    <input id="check1" type="checkbox" name="check" value="check1">
  </label>

</div>

When I click on image it should be checked but its not working. When I set label tag followed by input tag it's working, but I want exact same html structure.