futurebox + opacity css

/* file name lb.css */
#overlay {

    opacity: 0;
    position:absolute;
    height:100%;
    width:100%;
    margin:0;top:0;left:0;
    background-color:rgba(0,0,0,0.95);
        transition: opacity 0.7s;
    -moz-transition: opacity 0.7s; /* Firefox 4 */
    -webkit-transition: opacity 0.7s; /* Safari and Chrome */
    -o-transition: opacity 2s; /* Opera */
}

#magnolia-lb {
    position:absolute;
    padding:0.5em;
    border:1em solid #999999;
    background-color:#333333;
    margin:auto;
    width:500px;
    height:375px;
    top:0; bottom:0; left:0; right:0;

}

ul li input { opacity: 0;}
ul li input:checked + #overlay {
    opacity: 100;
        transition: opacity 0.7s;
    -moz-transition: opacity 0.7s; /* Firefox 4 */
    -webkit-transition: opacity 0.7s; /* Safari and Chrome */
    -o-transition: opacity 0.7s; /* Opera */
}