CSS Masonry Grid с JQuery . Как скрыть изображения в сетке, кроме скрытого изображения и первого столбца

Question

Я создаю собственную тему для koken на основе их темы фреймворка Blueprint и закодировал ее так, чтобы шаблон альбома зацикливался на всех изображениях в альбоме и выводил изображения в 4-колоночную кладочную сетку, используя CSS, и скрипт jquery, чтобы когда я наводю курсор мыши на изображение, оно изменяет непрозрачность всех других изображений в сетке на 0,4.

Код jquery с сеткой прекрасно работает в JSFiddle, но когда я переношу его в тему koken, всякий раз, когда изображение наведено, скрипт работает в течение секунды, показывая все изображения, кроме наведенного, с пониженной непрозрачностью, но затем скрывает все изображения, кроме для скрытого изображения и первого столбца.

Код, используемый для сетки, выглядит следующим образом:

HTML

<main>
<div id="grid">
    <ul>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
    </ul>
</div>

CSS

#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;
}

JS

$('img.gridimg').hover(function () {
    $('img.gridimg').not(this).each(function () {
        $(this).toggleClass("opaque");
    });
});

JSFiddle здесь: http://jsfiddle.net/jgYY9/3/

Есть ли что-то в коде koken, который это испортил? И кто-нибудь знает, как я могу это исправить?

Благодарю.