Question

我一直在努力为我的网站实现这种效果，但似乎代码无效。这是sample site。

我主要是改变主题的这一部分..

.main-content-area img.wp-post-image {
    min-width: 100%;
    height: auto;
}

.main-content .wp-post-image {
}

.main-content-area img {
    max-width: 100%;
}

更改最小宽度和高度会反映更改，我不确定在悬停图像时如何操作。任何建议都会有帮助。谢谢！

Answer 1

也许尝试使用CSS转换比例，与CSS转换配对（这使得css更改在设定的时间间隔内发生）。不是我的小提琴，但在这里是：

http://jsfiddle.net/27Syr/1206/

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

如果您对此有任何疑问，请随时向我询问。

悬停图像效果 - 要添加什么？

1 个答案: