JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: table; margin: 0 auto;">
    <div class="gird">
        <label for="box1">
            <img src="http://goo.gl/zB3ch"/>
        </label>
                   <input id="box1" name="gallery" type="radio" />
                    <div class="layer">
                        <label for="zu" title=""><iframe height="850px" src="https://docs.google.com/document/pub?id=1ZgxI5tZIuM2u7SAZG50-2aE-3K_7tYevgjrbOJAVD68&amp;embedded=true" width="300px"></iframe></label>
                    </div>
    </div>
   <input id="zu" name="gallery" type="radio" />

CSS

.grid {
            display: block;
            float: left;
            padding: 10px 0;
}

.layer {
    width: 100%;
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
    z-index: 999;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.7);
}
.layer label {    
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
}
input:checked ~ .layer { 
     display: table; 
}
input:checked ~ .layer label:before {
     content:url("http://goo.gl/v968O");
    position: absolute;
    right: 5px;
    top: 5px;
}
#zu, input {}