title: How do I make this lightbox I am creating only open on the div I am clicking?
body: <p>I am working on an effect here, I will post the code as well, but here is the basic premise. I have a div containing 2 divs and one hidden div called test. When I click the containing div I want the hidden div (which is called "test") to animate only for the containing div I clicked. Right now it is opening on every single div because of how I have the code written, I am thinking I have to use "this" in order to get it to open correctly the way I want it, but I am not sure how to use it in this instance</p>
  
  <p>TLDR: I want to toggle class .open on the div .test when I click the div .workImg (or workBlock), currently it is opening on every .workImg, I want it to only open on the one I click. I am very stumped, I think I need to use $(this) in here somewhere to target just the one I am clicking but cannot figure out how to apply that since all of my class names are the same...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="workCont"&gt;
      &lt;div class="workBlock"&gt;
          &lt;div class="workImg"&gt;
              &lt;div class="test"&gt;&lt;/div&gt;
              &lt;img src="/assets/images/piece1.jpg" /&gt;
          &lt;/div&gt;
          &lt;div class="workName"&gt;Project&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="workBlock"&gt;
          &lt;div class="workImg"&gt;
              &lt;div class="test"&gt;&lt;/div&gt;
              &lt;img src="/assets/images/piece1.jpg" /&gt;
          &lt;/div&gt;
          &lt;div class="workName"&gt;Project&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="workBlock break"&gt;
          &lt;div class="workImg"&gt;
              &lt;div class="test"&gt;&lt;/div&gt;
              &lt;img src="/assets/images/piece1.jpg" /&gt;
          &lt;/div&gt;
          &lt;div class="workName"&gt;Project&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.workCont {
      width:1024px;
      margin: $center;
      overflow:hidden;
      .workBlock {
          float:left;
          margin-left:17px;
          &amp;:nth-child(3n+1) {
              margin-left:0;
          }
          &amp;:nth-child(1n+1) {
              margin-top:33px;
          }
          .workImg {
              background:#151515;
              width:330px;
              height:201px;
              display:inline-block;
              position: relative;
          }
          .test {
              position: absolute;
              z-index:100;
              width: 0px;
              height: 0px;
              -webkit-transition-duration: 1s;
              -webkit-transition-property: all;
              -webkit-transition-timing-function: ease-in-out;
              text-align: center;
              background: white;
              color: white;
              font-family: sans-serif;  /* Just 'cos */
          }
          .test.open {
             transform: scale(50, 50);
              top: 0px;
              left: 0px;
              width: 1000px;
              height: 1000px;
              clear:both;
          }
          .workName {
              text-align:center;
              margin-top:17px;
          }
      }
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function(){
      $(".workImg").click(function() {  
          $(".test").toggleClass("open");      
      });
  });
  </code></pre>