jquery - 图片向上滚动

标签 jquery html css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 8 年前

我正在尝试制作一组​​在悬停时向上滚动的社交媒体按钮。

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

我知道它与转换和翻译属性有关,但我不能完全确定我需要做什么。

有人可以帮忙吗?

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

谢谢。

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

最佳答案

仅使用 HTML 和 CSS 的非常基本的实现,背景通过过渡进行推送。

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

关于jquery - 图片向上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28612772/

上一篇:javascript - 使用 CSS3 转换缩略图标题

下一篇:html - 如何在验证失败时更改文本框的 CSS 类,然后在验证成功时再次将其更改回来?

相关文章:

jQuery .hide 有效,但 .show 无效

html - 我将如何将过渡应用到导航元素?

html - 使我的图像全宽

javascript - firefox 使用 jQuery animate 方法和绝对位置的奇怪行为

HTML CSS 样式高度 :100% Works fine in chrome but not in IE or Firefox [becoming crazy! ]

jquery - 将同一页面上的 #link 锚定到 Woocommerce jQuery 选项卡

javascript - 动态表格行,将点击事件委托(delegate)给新添加的元素

jquery - jquery mobile 的导航栏中的选择未正确发生

javascript - 从 Angular http 调用加载数据和背景图像后

css - Internet Explorer 外部 CSS 问题