CSS3-Toggler mit Pseudoklasse :checked

HTML

<div id="grid">
<ul>
    <li>
        <label for="box01"><div class="titel">2012</div></label> 
            <input type="radio" id="box01" name="gallery" />
                   <div class="layer">test</div>
    </li>
    <li>
        <label for="box02"><div class="titel">2011</div></label>
            <input type="radio" id="box02" name="gallery" />
                <div class="layer"><span class="holder">&lt;content2&gt;</span>
        </div>
    </li>
    <li>
        <label for="box03"><div class="titel">2010</div></label>
            <input type="radio" id="box03" name="gallery" />
                <div class="layer"><span class="holder">&lt;content3&gt;</span>
        </div>
    </li>
    <li>
        <label for="box04"><div class="titel">Ebene4</div></label>
            <input type="radio" id="box04" name="gallery" />
                <div class="layer"><span class="holder">&lt;content4&gt;</span>
        </div>
    </li>
</ul>
</div>
<div id="zu">
     <label id="cl" for="close" title="">« Toggler Reset</label>
    
<input type="radio" id="close" name="gallery" />
</div>

CSS

#grid {
    display: table;
    width: 200px;
    margin: 0 auto;
}
ul li {
    list-style: none;
}
input{
    display: none;
}
#zu {
    text-align: right;
    font-size: 26px;
    color: #ad3a2b;
    padding: 10px;
}
#zu:hover {
    color: red;
} 

.layer {
    display: block;
    text-align: center;
}
.layer .holder {
    position: relative;
    top: 50%;
}
.titel {
    text-align: center;
    display: block;
    padding: 10px 0;
    background: rgba(211,211,211,0.4);
    color: rgba(44,44,44,1);
    -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAANUlEQVQIW2NkYGBgQ8JAJsMvEGYEEjxQzA0SBYKvQPwFJCEExIJAfBcqoQyk3+OVwGkUVssBP4wMT0ZBZV0AAAAASUVORK5CYII=") 2 2 2 2 / 2px 2px 2px 2px repeat;-moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAANUlEQVQIW2NkYGBgQ8JAJsMvEGYEEjxQzA0SBYKvQPwFJCEExIJAfBcqoQyk3+OVwGkUVssBP4wMT0ZBZV0AAAAASUVORK5CYII=") 2 2 2 2 / 2px 2px 2px 2px repeat;-ms-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAANUlEQVQIW2NkYGBgQ8JAJsMvEGYEEjxQzA0SBYKvQPwFJCEExIJAfBcqoQyk3+OVwGkUVssBP4wMT0ZBZV0AAAAASUVORK5CYII=") 2 2 2 2 / 2px 2px 2px 2px repeat;-o-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAANUlEQVQIW2NkYGBgQ8JAJsMvEGYEEjxQzA0SBYKvQPwFJCEExIJAfBcqoQyk3+OVwGkUVssBP4wMT0ZBZV0AAAAASUVORK5CYII=") 2 2 2 2 / 2px 2px 2px 2px repeat;border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAANUlEQVQIW2NkYGBgQ8JAJsMvEGYEEjxQzA0SBYKvQPwFJCEExIJAfBcqoQyk3+OVwGkUVssBP4wMT0ZBZV0AAAAASUVORK5CYII=") 2 2 2 2 / 2px 2px 2px 2px repeat;
    -webkit-transition: all .1s ease-out;
       -moz-transition: all .1s ease-out;
         -o-transition: all .1s ease-in;
            transition: all .1s ease-in;
}
.titel:hover {
    background: rgba(221,221,221, 1);
    color: rgba(34,34,34, 1);
    /*-webkit-transition: all .1s ease-in;
       -moz-transition: all .1s ease-in;
       ...