Defaulting Show/Hide to Hide with pure CSS using checkbox

I am looking to have the 'item value appears here' to be hidden by default on landing on the page or refreshing. I am using a checkbox with a label to be used as the show/hide click. This appears in 3 columns and currently clicking 'show' on the left column makes all 3 item values appear (this is not a problem and as I do not wish to use JavaScript, happy with this, although if clicking on one only unhides one value with css then I'm all ears!).

I am not able to use JavaScript and feel there must be a way to do this with CSS using checkboxes - any help will be greatly appreciated!

 <div class="key-items-wrapper">
       <div class="left-column">
               <img src="/images/item.png"> 
                    <div class="center-column-text">
                         <p>item name</p>
                           <div class="content">
                                 <p>item value appears here</p>                            
                                </div>                        
                                    <input id="checkbox-privacymode" type="checkbox"> 
                                    <label for="checkbox-privacymode"></label>
                        </div>
                </div>

This is the code for the checkbox

 #checkbox-privacymode {
    display: none;
    visibility:hidden;
}

#checkbox-privacymode + label {
    display: block;
    padding-right: 52px;
    height: 35px;
    background: transparent url(/images/eye-hidden.png) no-repeat scroll right center;
    float: right;
    font-size: 0.9em;
    color: #777;
    cursor: pointer;
}

#checkbox-privacymode + label::before {
    content: 'hide';
}

#checkbox-privacymode:checked + label {
    background-image: url(/images/eye.png);
    display:block;
}

#checkbox-privacymode:checked + label::before {
    content: 'show';
}

Many Thanks