<分区>
我正在使用 wordpress 和 wooslider。我的问题是我想像这样在鼠标悬停时平移缩略图:Sample Site
这是我从 wooslider 获得的输出,但是我希望效果像上面提到的那样:Wooslider effect
css 有以下几行,但是我发现很难弄清楚要进行哪些编辑才能达到上述效果
.wooslider-control-thumbs img:hover {opacity: 1;}
标签 html css mousehover
<分区>
我正在使用 wordpress 和 wooslider。我的问题是我想像这样在鼠标悬停时平移缩略图:Sample Site
这是我从 wooslider 获得的输出,但是我希望效果像上面提到的那样:Wooslider effect
css 有以下几行,但是我发现很难弄清楚要进行哪些编辑才能达到上述效果
.wooslider-control-thumbs img:hover {opacity: 1;}
最佳答案
我相信,您正在寻找 CSS 转换:
例子:
HTML:
<img src="https://www.google.ru/images/srpr/logo4w.png" />
CSS:
img {
margin: 40px;
}
img:hover {
margin-top: 20px;
transition: margin 1s;
}
关于html - 如何使用css垂直移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17547698/