Question

我正在使用wordpress和wooslider。我的问题是我想在鼠标悬停上平移缩略图像，如下所示：Sample Site

这是我从wooslider获得的输出，但我希望效果与上面提到的效果类似：Wooslider effect

css有以下几行，但是我觉得很难弄清楚为了达到上述效果所做的编辑

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

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

Answer 2

我为你创建了这个Example

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

如何用css垂直移动图像

2 个答案: