title: CSS Masonry Grid with JQuery .hover hiding images in grid other than hovered image and first column
body: <p>I am building a custom theme for koken based on their Blueprint framework theme and have coded it so the album template loops over all images in the album and outputs the images into a 4 column masonry-like grid using CSS, and a jquery script so that when I hover over an image it changes the opacity of all other images in the grid to 0.4.</p>
  
  <p>The jquery code with the grid works fine in JSFiddle, but when I bring it into the koken theme, whenever an image is hovered, the script works for a second showing all but the hovered image at reduced opacity, but then hiding all the images except for the hovered image and the first column.</p>
  
  <p>The code used for the grid is as follows:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;main&gt;
  &lt;div id="grid"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://placekitten.com/300/200" class="gridimg" /&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>#grid {
      /* Prevent vertical gaps */
      line-height: 0;
      -webkit-column-count: 4;
      -webkit-column-gap: 0;
      -moz-column-count: 4;
      -moz-column-gap: 0;
      column-count: 4;
      column-gap: 0;
  }
  #grid img {
      /* Just in case there are inline attributes */
      width: 100% !important;
      height: auto !important;
  }
  #grid ul li {
      display: inline;
  }
  .gridimg {
      opacity:1;
      transition: opacity 0.5s;
  }
  .opaque {
      opacity:0.4;
      transition: opacity 0.5s;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('img.gridimg').hover(function () {
      $('img.gridimg').not(this).each(function () {
          $(this).toggleClass("opaque");
      });
  });
  </code></pre>
  
  <p>JSFiddle is here: <a href="http://jsfiddle.net/jgYY9/3/" rel="nofollow noreferrer">http://jsfiddle.net/jgYY9/3/</a></p>
  
  <p>Is there something in the koken code that is messing this up? And does anyone know how I can fix it?</p>
  
  <p>Thanks.</p>