Image jump on hover after border & padding - css

Question

For the life of me I can't figure out how to correct this. I am trying to replicate the effect from http://css-tricks.com/examples/DifferentTransitionsOnOff/ for my Wordpress image grid (code from here https://gist.github.com/matthiaspabst/1959566). 180x150 is my wp post_thumbnail image size.
Trial and error is not getting me anywhere for the past 2 hours. Here is my amateurish attempt at it http://jsfiddle.net/9F3aF/. Please help.
HTML
<div class="gridcontainer">
<div class="griditemleft">
<div class="postimage">
<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" />
</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);
}
P.S. Is there any useless css in there?
Thanks

Answer 1

Try removing this line from your class that starts with ".griditemleft .postimage img:hover"...
margin: -10px 0 0 -10px;
I did it here. Is this what you were going for? http://jsfiddle.net/gEYxr/