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

Question

我正在使用 wordpress 和 wooslider。我的问题是我想像这样在鼠标悬停时平移缩略图：示例站点

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

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

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

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

Answer 2

我为您创建此示例

html:

<ul>
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
</ul>

CSS：

ul
{
transform: translate3d(0px, 0px, 0px);
transition-duration: 0s;
width: 800%;
display: table;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
transform: none !important;
width: 100% !important;
}
ul li
{
float: left;
width: 160px;
background-color:gray;
border-right: 1px solid white;
height: 200px;
cursor: pointer;
position: relative;
}
div
{
padding-top: 77px;
height: 100px;
background-color: gold;
position: absolute;
right: 0;
bottom: 0;
width: 100%;
transition: all 0.3s ease 0s;
}
div:hover
{
height:123px;
}