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

Question

我一直试图在我的网站上实现这种效果，但代码似乎无法正常工作。这是 sample site .

这里是 the site I'm working on .

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

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

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

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

更改最小宽度和高度会反射(reflect)出这些变化，我不确定在悬停图像时该怎么做。任何建议都会有所帮助。谢谢!

Answer 1

也许可以尝试 CSS Transform Scale，搭配 CSS Transition(这使得 css 更改在设定的时间间隔内发生)。不是我的 fiddle ，但它在这里:

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);
}

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