边框和填充后图像跳转悬停

Question

对于我的生活，我无法弄清楚如何解决这个问题。我试图从http://css-tricks.com/examples/DifferentTransitionsOnOff/复制我的WordPress图片网格（代码从这里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); 
     } 

附：那里有没有用的css？

感谢

Answer 1

尝试删除从你的类此行开头 “.griditemleft .postimage IMG：悬停” ......

margin: -10px 0 0 -10px; 

我做到了这里。这是你要去的吗？ http://jsfiddle.net/gEYxr/