css - 在悬停CSS上滑动图像的其余50％

我在一个网站上工作，并已使用响应式CSS成功将其从html4.0转换为html5。

但是最后，在面临一个问题。原始网站的页脚中有一张图片，该图片在y轴上显示了50％，并且当您将鼠标悬停在其上时，其余的图片都将其隐藏起来。实时示例-> bsonspec.org

该图像位于https://github.com/Rohitkumary/bsonspec中的源代码下方的assets / cc.png文件夹中

提前致谢。

最佳答案

将过渡属性添加到“ a.ro”

a.ro {
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
    height: 70px;
    transition: all 0.2s ease-in-out; // add this line
}