Question

对于我的生活，我无法弄清楚如何纠正这一点。我试图将http://css-tricks.com/examples/DifferentTransitionsOnOff/的效果复制到我的Wordpress图像网格（此处为https://gist.github.com/matthiaspabst/1959566的代码）。 180x150是我的wp post_thumbnail图片大小。

在过去的两个小时里，试验和错误并没有让我到任何地方。这是我对它的业余尝试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);
        }

P.S。那里有无用的css吗？

由于

Answer 1

尝试从以“.griditemleft .postimage img：hover”开头的类中删除此行...

margin: -10px 0 0 -10px;

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

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

1 个答案: