A minimal, pure-CSS Lightbox replacement

<h2>All images on this example page are from <a href="https://unsplash.com/" target="_blank">Unsplash</a>, available under <a href="http://creativecommons.org/publicdomain/zero/1.0/" target="_blank">Creative Commons Zero 1.0</a>.</h2>

<div class="cssbox">
    <a id="image1" href="#image1"><img class="cssbox_thumb" src="http://doodlenerd.com/Uploads/Resources/2018/08/tw519Ay3v7c/images/lakeview.jpeg" height="300" width="300">
        <span class="cssbox_full"><img src="http://doodlenerd.com/Uploads/Resources/2018/08/tw519Ay3v7c/images/lakeview.jpeg"></span>
    </a>
    <a class="cssbox_close" href="#void"></a>
    <a class="cssbox_next" href="#image2">&gt;</a>
    <p><a href="https://unsplash.com/photos/eBDdgbM5dSo" target="_blank">Image by Paul Jarvis</a></p>
</div>
<div class="cssbox">
    <a id="image2" href="#image2"><img class="cssbox_thumb" src="http://doodlenerd.com/Uploads/Resources/2018/08/tw519Ay3v7c/images/sea.jpeg" height="300" width="300">
        <span class="cssbox_full"><img src="http://doodlenerd.com/Uploads/Resources/2018/08/tw519Ay3v7c/images/sea.jpeg"></span>
    </a>
    <a class="cssbox_close" href="#void"></a>
    <a class="cssbox_prev" href="#image1">&lt;</a>
    <a class="cssbox_next" href="#image3">&gt;</a>
    <p><a href="https://unsplash.com/photos/UklXbPE-Hos" target="_blank">Image by Joseph Barrientos</a></p>
</div>
<div class="cssbox">
    <a id="image3" href="#image3"><img class="cssbox_thumb" src="http://doodlenerd.com/Uploads/Resources/2018/08/tw519Ay3v7c/images/cloud.jpeg" height="300" width="300">
        <span class="cssbox_full"><img src="http://doodlenerd.com/Uploads/Resources/2018/08/tw519Ay3v7c/images/cloud.jpeg"></span>
    </a>
    <a class="cssbox_close" href="#void"></a>
    <a class="cssbox_prev" href="#image2">&lt;</a>
    <p><a href="https://unsplash.com/photos/2W5LoumSdfw" target="_blank">Image by Sebastian Gabriel</a></p>
</div>