CSS Masonry Grid with JQuery Opacity reduce on all images but hovered

HTML

<link rel="stylesheet" href="http://zacharney.com/reset.css">
<h1>Hover over an image</h1>
<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>
</main>

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

JavaScript

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