DIV上的转换时间悬停，让其他DIV烦人移动

Question

我在2个div中有6个缩略图。顶部3个，底部3个。所有在一个主要的div。 所以， 我希望每个缩略图都具有webkit过滤器的悬停效果。 但是，当我将transition:-webkit-filter 0.3s;添加到mydiv：hover时，它会使其他DIV有点恼人的移动 - 大约1或2 px - 而另一件事是它使效果变得缓慢而尖锐。

这是我的代码：

HTML：

<div id="Sections_Top">
            <div id="Sections_Top_Inner">

                <a href="Monthly-Report" class="Sections_Cover" style="border-top:0px; border-right:0px; top=2px; right:0px;">
                    <span>گزارش ماه</span>
                    <img src="http://i.imgur.com/z3vWujd.jpg">
                </a>

                <a href="Managers-Club" class="Sections_Cover" style="border-top:0px; top=2px; left: 50%; margin-left:-8.435em;">
                   <span>باشگاه مدیران</span>
                   <img src="http://i.imgur.com/z3vWujd.jpg">
                </a>

                <a  href="Service-and-Trace" class="Sections_Cover" style="border-top:0px; border-left:0px; top=2px; left: 0px;">
                    <span>خدمت و تجارت</span>
                    <img src="http://i.imgur.com/z3vWujd.jpg">
                </a>

            </div>
        </div>

        <div id="Sections_Bottom">
            <div id="Sections_Bottom_Inner">

                <a href="Library" class="Sections_Cover" style="border-bottom:0px; border-right:0px; bottom:2px; right:0px;">
                    <span>کتابخانه</span>
                    <img src="http://i.imgur.com/z3vWujd.jpg">
                </a>

                <a href="Solution" class="Sections_Cover" style="border-bottom:0px; bottom:2px; left: 50%; margin-left:-8.435em">
                    <span>راه حل</span>
                    <img src="http://i.imgur.com/z3vWujd.jpg">
                </a>

                <a href="World" class="Sections_Cover"style="border-bottom:0px; border-left:0px; bottom:2px; left: 0px;">
                    <span>پیوست جهان</span>
                    <img src="http://i.imgur.com/z3vWujd.jpg">
                </a>

            </div>
        </div>

CSS：

#Sections {
        width: 100%;
        height: 95.5%;
        position: relative;
        float: right;
        background-image: url(Images/Sections_BG.png);
        text-align: center;
        margin-top: auto;
        overflow: visible;
        z-index: -4;
    }

    #Sections_inner {
        width: 90%;
        height: 90%;
        display: inline-block;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: visible;
        z-index: -3;
    }

    #Sections_Top {
        width: 100%;
        height: 48%;
        right: 0;
        left: 0;
        top: 0;
        position: absolute;
        float: right;
        overflow: visible;
    }

    #Sections_Top_Inner {
        width: 85%;
        height: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        text-align: center;
        padding-top: 10px;
        overflow: visible;
    }

    #Sections_Bottom {
        width: 100%;
        height: 48%;
        right: 0;
        left: 0;
        bottom: 0;
        top:50%;
        position: relative;
        float: right;
        overflow: visible;
        z-index: -2;
    }

    #Sections_Bottom_Inner {
        width: 85%;
        height: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        text-align: center;
        overflow: visible;
    }

    .Sections_Cover {
        width: 270px;
        height: 270px;
        float: right;
        position: absolute;
        -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px #545454;
        box-shadow: 0 0 5px rgba(0,0,0,0.2), inset 0 0 50px #545454;
        overflow: visible;
        display: block;
        transition:-webkit-filter 0.3s;
    }

    .Sections_Cover:hover{
        -webkit-filter:sepia(50%);
    }

    .Sections_Cover > img {
        width: 270px;
        height: 270px;
    }

    .Sections_Cover > span {
        width: 270px;
        height: 27px;
        position: absolute;
        bottom: 0;
        right:0px;
        font-family: BBCNassim;
        color: #FFF;
        line-height: 1.8em;
        opacity: 0.8;
        transition:all 0.2s;
    }

添加转换时，问题出在.Sections_Cover或.Sections_Cover:hover。

这是我的JSSFIELD：http://jsfiddle.net/Ea7aB/（与我的项目不同）。但是，jssfield示例工作正常，如果我将浏览器窗口调整大约30％（或某事物），它也可以正常工作。但如果我最大化浏览器窗口，问题会再次出现！