Html 悬停时自动滚动图像高度高于容器（更高的图像）

我想知道如何制作本网站中的“悬停时滚动到顶部”功能：

如果将鼠标悬停在每个网格上，图像将缓慢滚动到顶部并停止

我已经在stackoverflow.com上找到了答案

但我需要的是没有Javascript的答案。在上面的链接中有一个非javascript的答案，但是我不知道如何为我的长图像修改它。（见下图）

我不想要javascript，因为我使用的是divi主题，我不知道在哪里放置javascript

---

顺便说一句，我是新手。非常感谢你的帮助。

让我回答你的问题。但是首先你需要javascript来知道图像的高度。回答“您将滚动多少像素？”。但是假设您知道图像高度，或者您将使用相同大小的图像。在这种情况下，解决方案的关键是使用相对位置为的父元素“div”和溢出中隐藏的，绝对位置为的子元素“img”，0顶部像素和顶部的过渡属性。然后在子对象上添加悬停效果在您的示例中，使用最大值“图像高度-父对象高度”的图像。你可以看到

以下是HTML：

.img包装器
{
溢出：隐藏；
位置：相对位置；
浮动：左；
高度：300px；
宽度：400px；
边框：5px实心#BBB；
边界半径：5px 5px 5px；
}
.极端高度图像
{
位置：绝对位置；
排名：0；
宽度：400px；
高度：自动；
过渡：前5位缓和0位；
}
.极端高度图像：悬停
{
顶部：-300px；
}

---

如果你想让img自动滚动，你必须设置一个指定宽度和高度的包装！不必为img本身设置宽度/高度

.img包装器{
最大宽度：80px；
最大高度：80px；
溢出：自动；
背景：红色；
}

---

哇，你的回答很有魅力。。。好极了，但我没有一路走下去？我如何调整它，使它一直向下。。。我的意思是在哪里调整高度它@A.Hussien谢谢大家，很多人，这种效果有什么共同的名字吗？有Wordpress插件吗？