制作幻灯片，直到图标img

Question

我想制作图标img来向上滑动，有什么建议吗？喜欢此网站中的社交图标：http://trydo.rainbowit.net/dark-portfolio-landing#portfolio

.move-left
{
position: relative;
transition: transform 0.3s ease;
transform: translateX(0px);
}
.move-left img:hover {
transform: translateY(-4px);
cursor: pointer;

}

<div class="move-left">
<li class="nav-item"><a href="#"><img        src="facebook.svg" height="16px"></a></li>
</div>

Answer 1

当您的所有transform和transition属性都在.move-left上时，我不确定您为什么要移动img。

我已经按照@Paulie_D的评论修复了你的HTML。

.move-left {
position: relative;
transition: transform 0.3s ease;
transform: translateX(0px);
}
ul {
list-style: none;
}
.move-left:hover {
transform: translateY(-4px);
cursor: pointer;
}

<div class="move-left">
<ul>
<li class="nav-item">
<a href="#"><img src="https://www.svgrepo.com/show/3885/facebook.svg" height="16px"></a>
</li>
</ul>
</div>

如果您只想在特定悬停在图像上时移动图像，只需在CSS中将.move-left切换为img即可。

img {
position: relative;
transition: transform 0.3s ease;
transform: translateX(0px);
}
img:hover {
transform: translateY(-4px);
cursor: pointer;
}
ul {
list-style: none;
}

<div class="move-left">
<ul>
<li class="nav-item">
<a href="#"><img src="https://www.svgrepo.com/show/3885/facebook.svg" height="16px"></a>
</li>
</ul>
</div>