我一直试图在我的网站上实现这种效果,但代码似乎无法正常工作。 这是 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)出这些变化,我不确定在悬停图像时该怎么做。任何建议都会有所帮助。谢谢!
最佳答案
也许可以尝试 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);
}
如果您对此有任何疑问,请随时问我。
关于css - 悬停图像效果 - 添加什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26942130/