html - cssで画像を縦に移動する方法

Question

wordpress と wooslider を使用しています。私の問題は、次のようにマウス ホバーでサムネイル画像をパンしたいことです:サンプル サイト

これは私が wooslider から達成した出力ですが、効果を上記のようなものにしたい: Wooslider 効果

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