title: Specify jQuery overlay function to one element and not open all at once
body: <p>I'm doing a school project about creating a new website for this dog club called, Danish Terrier Club. </p>
  
  <p>I've wanted to make a race page about all the terriers and build it up by creating hexagon pictures and give them each an overlay, so when you click on it the rest becomes darks and a box pops up with infos and more pictures about the race you've clicked on. </p>
  
  <p>Got it all to work but I have this problem that the jQuery code is not specific to the one you click on. For some reason, it opens all of the overlays at the same time and they stack on each other.</p>
  
  <p>Can anyone help me find out what I must change in my code?</p>
  
  <p>ps.</p>
  
  <p>Most of the code is found on different open sources.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* 
   * overlay.js v1.0.0
   * Copyright 2014 Joah Gerstenberg (www.joahg.com)
   */
  (function($) { 
    $.fn.overlay = function() {
      overlay = $('.overlay');
  
      overlay.ready(function() {
        overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
          if (!overlay.hasClass('shown')) {
            overlay.css('visibility', 'hidden');
          }
        });
  
        overlay.on('show', function() {
          overlay.css('visibility', 'visible');
          overlay.addClass('shown');
          return true;
        });
  
        overlay.on('hide', function() {
          overlay.removeClass('shown');
          return true;
        });
  
        overlay.on('click', function(e) {
          if (e.target.className === overlay.attr('class')) {
            return overlay.trigger('hide');
          } else {
            return false;
          }
        })
  
        $('a[data-overlay-trigger]').on('click', function() {
          overlay.trigger('show');
        });
      })
    };
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outerbox {
   display:flex;
     align-items:center;
     justify-content:center;
  }
  
  #easyOverlay{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    visibility: hidden;
    top: 0;
    color:#fff;
    z-index: 1000;
  }
  
  #easyOverlay .closeit {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 5px;
    background: #333;
    color: #fff;
    cursor: pointer;
    z-index: 2000;
    text-decoration: none;
  }
  
  #flexcolumn {
   display:flex;
   flex-direction:row;
  }
  
  .firstcolumn {
   flex-direction:column;
   margin-top:auto;
   margin-bottom:auto;
  }
  
  .secondcolumn {
   flex-direction:column;
   margin-top:auto;
   margin-bottom:auto;
  }
  
  .thirdcolumn {
   flex-direction:column;
   margin-top:auto;
   margin-bottom:auto;
  }
  
  .fourthcolumn {
   flex-direction:column;
   margin-top:auto;
   margin-bottom:auto;
  }
  
  .fifthcolumn {
   flex-direction:column;
   margin-top:auto;
   margin-bottom:auto;
  }
  
  .sixthcolumn {
   flex-direction:column;
   margin-top:auto;
   margin-bottom:auto;
  }
  
  .seventhcolumn {
   flex-direction:column;
   margin-top:auto;
   margin-bottom:auto;
   text-align:center;
  }
  
  
  .overlay {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.85);
    cursor: pointer;
  
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
  }
  
  .overlay .modal {
    cursor: auto;
    position: absolute;
    z-index: 11;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 500px;
    max-height: 300px;
    padding: 20px;
    background-color: rgb(255,255,255);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  
  .overlay.shown {
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="iso-8859-1"&gt;
  &lt;title&gt;DTK Hexagon&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="dist/overlay.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function() {
          $('.overlay').overlay();
        });
      &lt;/script&gt;
      &lt;link rel="stylesheet" href="dist/overlay.css"&gt;
  &lt;link href="stylehexagon.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;!-- 
    
       flexcolumn ID = put every column in a row beside each other
       
    the column divs = put every picture in a column     
  
  --&gt;
  
  
  &lt;div class="outerbox"&gt; 
      &lt;div id="flexcolumn"&gt;
      
          &lt;div class="firstcolumn"&gt;
              &lt;div class="borderterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/borderterrier.png"&gt;&lt;/a&gt;
                   &lt;div class="overlay"&gt;
                        &lt;div class="modal"&gt;
                          &lt;h1&gt;Border terrier&lt;/h1&gt;         
                          &lt;p&gt;Jeg ser ingen border :I&lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;   
              &lt;/div&gt;
              
              &lt;div class="foxterrierglathaaret"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/sada.png"&gt;&lt;/a&gt;
                   &lt;div class="overlay"&gt;
                        &lt;div class="modal"&gt;
                          &lt;h1&gt;Fox terrier glathåret&lt;/h1&gt;         
                          &lt;p&gt;den er glat håret :I&lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
          
      
          &lt;div class="secondcolumn"&gt;
              &lt;div class="airedaleterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/airedaleterrier.png"&gt;&lt;/a&gt;
                   &lt;div class="overlay"&gt;
                        &lt;div class="modal"&gt;
                          &lt;h1&gt;Airedale terrier&lt;/h1&gt;         
                          &lt;p&gt;Airedale.. Dafuq :I&lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/div&gt; 
              &lt;/div&gt;
              
              &lt;div class="bullterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/bullterrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="foxterrierruhaaret"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/fox_terrier_ruhaaret.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="kerryblueterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/kerry_blue_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="norwichterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/norwich_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="thirdcolumn"&gt;
              &lt;div class="americanstaffordshireterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/muricanstaffordshireterrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="bull_terrier_miniature"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/bull_terrier_miniature.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="irishglenofimaal"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/irish_glen_of_imaal.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="lakelandterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/lakeland_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="parsonrussellterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/parson_russell_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="staffordshirebullterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/staffordshire_bull_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="fourthcolumn"&gt;
              &lt;div class="australskterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/australsk_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="cairn_terrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/cairn_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="irishsoftcoatedwheatenterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/irish_soft_coated_wheaten_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              
              &lt;div class="sealyhamterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/sealyham_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="terrierbrasileiro"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/terrier_brasileiro.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="westhighlandwhiteterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/west_highland_white_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="fifthcolumn"&gt;
              &lt;div class="australiansilkyterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/australian_silky_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="ceskyterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/cesky_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="irskterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/irsk_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="manchesterterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/manchester_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="skotskterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/skotsk_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="welshterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/welsh_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="sixthcolumn"&gt;
              &lt;div class="bedlingtonterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/bedlington_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="dandiedinmontterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/dandie_dinmont_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="jackrussellterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/jack_russell_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="norfolkterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/norfolk_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="skyeterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/skye_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="seventhcolumn"&gt;
              &lt;div class="engelsktoyterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/engelsk_toy_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
              
              &lt;div class="japanskterrier"&gt;
                  &lt;a data-overlay-trigger href="#!"&gt;&lt;img src="img/japansk_terrier.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>