html - 如何使用css垂直移动图像

标签 html css mousehover

<分区>

我正在使用 wordpress 和 wooslider。我的问题是我想像这样在鼠标悬停时平移缩略图:Sample Site

这是我从 wooslider 获得的输出,但是我希望效果像上面提到的那样:Wooslider effect

css 有以下几行,但是我发现很难弄清楚要进行哪些编辑才能达到上述效果

.wooslider-control-thumbs img:hover {opacity: 1;}

最佳答案

我相信,您正在寻找 CSS 转换:

Demo

例子:

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/

相关文章:

java - JLabel HTML 中的相对路径

javascript - 将 image2 重叠在 image1 上

javascript - 当 Canvas 宽度改变时, Canvas 线宽也会改变

html - 4 列与 bootstrap 3.3.7 不正确对齐

html - 如何将 div 悬停事件放在父项而不是子项上?

html - 将鼠标悬停在文本链接上会更改图像的 z-index

html - 鼠标悬停在 HTML 函数中以弹出或放大图片

css - 使用 Bootstrap 针对设备类型进行响应式设计

html - 如何缩小下拉菜单和菜单项之间的差距

jquery - 在 Essential Grid 中禁用悬停效果 - 仅适用于手机