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

【问题标题】：Hover image effect - what to add?悬停图像效果 - 添加什么？
【发布时间】：2015-01-12 13:27:51
【问题描述】：

我一直试图在我的网站上实现这种效果，但似乎代码不起作用。这是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%;
}

更改最小宽度和高度将反映更改，我不确定在悬停图像时该怎么做。任何建议都会有所帮助。谢谢！

【问题讨论】：

google "css hover"，例如 ."main-content-area img:hover {your css for hover event goes here}",。话虽如此，您正在寻找的可能是一个 jquery 解决方案。

标签： css wordpress hover

【解决方案1】：

也许可以试试 CSS Transform Scale，搭配 CSS Transition（这使得 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);
}

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

【讨论】：

还是不行。我应该修改 CSS 元素的哪个部分，以便将图像作为悬停效果的目标？