css - 图像在边框和填充后悬停时跳转

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:hover”开头的这一行...

margin: -10px 0 0 -10px;

我在这里做的。这是你想要的吗？ http://jsfiddle.net/gEYxr/