JSFiddle - React, Tailwind, and code Playground

HTML

<div class="crosshair">
      <div class="lines">
      </div>
    </div>
    <div class="overlay"></div>

CSS

body {
        text-align: center;

      }

      .crosshair {
        position: absolute;
        width: 500px; height: 500px;
        background-color: transparent;
        z-index: 1;
        border-radius: 500px;
        box-shadow: 0px 0px 40px #000000;
        opacity:.5;
      }

        .crosshair .lines {
          position: relative;
          top: 0; left: 0;
          width: 500px; height: 500px;
          z-index: 2;
        }
            .crosshair .lines:before {
                display:'block';
                content:'';
                position: absolute;
                top: 0; bottom: 0; left: 50%;
                margin-left: -1px;
                width: 1px;
                background-color: #000;
                opacity: .5;
                z-index:3;
            }
          .crosshair .lines:after {
            display:block; 
            content:'';
            position: absolute;
            top: 50%; left: 0; right: 0;
            margin-top: -1px;
            height: 1px;
            background-color: #000;
            opacity: .5;
            z-index:3;
          }

      .overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background:#222;
        overflow:hidden;
      }
.overlay:before {
    display:block;
    content:url(http://farm6.static.flickr.com/5020/5414373456_f03fd41a6c_b.jpg);
        position:fixed;
        top:0;left:0;
        z-index:0;
}