Question

我正在尝试制作一组社交媒体按钮，这些按钮会在悬停时向上滚动。

图像的宽度为145像素，高度为290像素。我只需要显示145px的高度，这样当图像悬停在上面时，重新着色的图像（剩余的145px高度）将原始图像向上推（溢出将被隐藏，我假设）。

我知道它与转换和转换属性有关但我无法完全理解我需要做的事情。

有人可以帮忙吗？

除非jQuery解决方案相当简单，否则我最好将其保留为CSS或HTML。

感谢。

示例图片http://i.imgur.com/X8PyBPp.png

Answer 1

仅使用HTML和CSS进行非常基本的实现，后台通过转换推送。

＆＃13;

div {
    height: 145px;
    width: 145px;
    transition: background 1s ease;
    background: url("http://i.imgur.com/X8PyBPp.png") no-repeat left top;
}
div:hover {
    background-position: left bottom;
    cursor: pointer;
}

＆＃13;

<div></div>

＆＃13;

图像向上滚动

1 个答案: