Change the opacity with a checkbox

I want to toggle the opacity of a div with a checkbox (no js pls) This is what I have:

<input type="checkbox" id="sidebartoggler">

<div class="overlay">
<div class="navtext">
<ul></ul>
</div></div>

And my css:

.overlay {background-color: black; height: 100px; width: 100px; opacity: 0;}

#sidebartoggler:checked + .overlay {opacity: 1;}