CSS Spoiler

by cahnory

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet deleniti eaque nostrum. Aut eos expedita porro <label class="spoiler" onclick=""><input class="outsight" type="checkbox" onclick="" /><span class="spoiled">facilis labore voluptas illo numquam nisi libero</span></label> iste excepturi illum adipisci quo repellendus praesentium.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis error amet eum tenetur tempore voluptas quas consequatur illum labore vero soluta consequuntur culpa repudiandae magni incidunt veritatis numquam nihil corrupti.
</p>
<p><label class="spoiler" onclick=""><input class="outsight" type="checkbox" onclick="" /><span class="spoiled">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis voluptatibus perspiciatis ipsa necessitatibus sed perferendis ut voluptate quos consequatur sit iure quis natus. Eos in sequi minus quis modi ipsum.
</span></label></p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste inventore quos iusto rem fugit nesciunt sequi dicta explicabo quibusdam ut ullam deserunt tempora officiis repellendus iure enim similique sapiente aspernatur.
</p>

CSS

.spoiler {
    background: rgba(0,0,0,.1);
}
.spoiled {
    cursor: pointer;
    opacity: 0;
}
:checked + .spoiled {
    opacity: 1;
}

/* Not specific to the demo */
.outsight {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    position: fixed;
    width: 1px;
}

/* For this and onclick="" see: http://cahnory.fr/css/tests/checked-target2.html */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { display: block } to { display: block } }