title: Duplicate Spotlight
body: <p>I'm working on a photo blog, and I'm working on a slightly different idea but and I've got this neat spotlight to work, however trying to duplicate it to make more than one neat little spotlight won't seem to work.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  
  
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"&gt;
      &lt;link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.min.css'&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
     &lt;div class="main"&gt;
      &lt;ul&gt;
       &lt;li&gt;&lt;div class="tjena"&gt;&lt;img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /&gt;&lt;/div&gt;&lt;/li&gt;
       &lt;li&gt;&lt;img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
     &lt;/div&gt;
   &lt;div id="overlag 1"&gt; 
    &lt;div id="spotlight" class="spotlight"&gt;&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div id="overlag 2"&gt;
    &lt;div id="spotlight" class="spotlight"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'&gt;&lt;/script&gt;
   &lt;script src='https://raw.githubusercontent.com/okfocus/okshadow/master/src/okshadow.js'&gt;&lt;/script&gt;
  
  &lt;script src="js/index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
    width: 100%;
    height: 100%;
  }
  
  body {
    position: relative;
    display: table;
    background-image: url("http://www.wildtextures.com/wp-content/uploads/wildtextures_white-brick-wall.jpg");
    background-repeat: repeat;
    background-size: 30%;
  }
  
  .main {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .main .title {
    font-size: 5rem;
    margin-bottom: 50px;
  }
  .main .sub-title {
    font-size: 2rem;
  }
  .main ul {
    display: flex;
  }
  .main ul li {
    margin: 0 120px;
  }
  
  .spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    background-image: -webkit-radial-gradient(center, circle cover, transparent -7%, rgba(0, 0, 0, 0.6) 13%);
  }
  .bild {
    height: 300px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  }
  </code></pre>