css - ボーダーとパディング後のホバー時の画像ジャンプ

Question

私の人生では、これを修正する方法がわかりません。Wordpress の画像グリッド (ここからのコード) のhttp://css-tricks.com/examples/DifferentTransitionsOnOff/からの効果を再現しようとしていhttps://gist.github.com/matthiaspabst/1959566ます。180x150 は私の wp post_thumbnail 画像サイズです。

過去 2 時間、試行錯誤を繰り返しても成果が得られません。これが私のアマチュア的な試みですhttp://jsfiddle.net/9F3aF/。助けてください。

HTML

<div class="gridcontainer">
<div class="griditemleft">
    <div class="postimage">
        <a href="#"><img width="180" height="134" src="http://www.football-quebec.com/IMG/cache-180x134/arton1095-180x134.jpg" class="attachment-post-thumbnail wp-post-image" alt="lions" /></a>
</div>
</div>
</div>

CSS

/* Thumbnail Grid */
.gridcontainer {}
.gridcontainer .griditemleft, .gridcontainer .griditemright {float: left; width: 210px; height:164px;}
.griditemleft .postimage img, .griditemright .postimage img {
            display: block;
            position: relative;
            padding: 10px 10px 10px 10px;
            border: 5px solid #aefbae;

            background-image: -moz-linear-gradient(top, #5be93a, #278312);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312));

            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;

            -webkit-transform: rotate(720deg) rotateY(0);
            -webkit-transition: all 0.5s;
            -webkit-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
            -webkit-transition-delay: 0.5s;

            -moz-transform: rotate(720deg);
            -moz-transition: all 0.5s;
            -moz-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
            -moz-transition-delay: 0.5s;

            -o-transform: rotate(720deg);
            -o-transition: all 0.5s;
            -o-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
            -o-transition-delay: 0.5s;
            -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
        }
        .griditemleft .postimage img:hover, .griditemright .postimage img:hover {
            -webkit-transition: padding 0.2s, top 0.2s;
            -webkit-transform: rotate(0deg) rotateY(0);
            -webkit-transition-delay: 0;

            -moz-transition: padding 0.2s, top 0.2s;
            -moz-transform: rotate(0deg);
            -moz-transition-delay: 0;

            -o-transition: padding 0.2s, top 0.2s;
            -o-transform: rotate(0deg);
            -o-transition-delay: 0;
            z-index: 1;
            padding: 20px 20px 20px 20px;   
            margin: -10px 0 0 -10px;
            background-image: -moz-linear-gradient(top, #5be93a, #5be93a, #278312);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312));
            width: 180px; height:134px;
            }

        .griditemleft .postimage img:after, .griditemright .postimage img:after {
            background: url(noise.png) center center;
            z-index: -1;
            position: absolute;
        }
        .griditemleft .postimage img:before, .griditemright .postimage img:before {
            z-index: -2;
            -webkit-transition: all 0.2s;
            -webkit-transform: rotate(0deg) rotateY(0);
            -webkit-transition-delay: 0;
            -moz-transition: all 0.2s;
            -moz-transform: rotate(0deg) rotateY(0);
            -moz-transition-delay: 0;
            -o-transition: all 0.2s;
            -o-transform: rotate(0deg) rotateY(0);
            -o-transition-delay: 0;
            position: absolute;
        }
        .griditemleft .postimage img:hover:before, .griditemright .postimage img:hover:before {
            -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.2);
            -moz-box-shadow: inset 0 0 100px rgba(0,0,0,0.2);
            box-shadow: inset 0 0 100px rgba(0,0,0,0.2);
    position: absolute;
        }
        .griditemleft .postimage img:active, .griditemright .postimage img:active {
            -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
            box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
        }

PSそこに無駄なcssはありますか？

ありがとう