html - CSS过渡使图像在悬停时上下移动

Question

http://imgur.com/bXU8I

我有这张图片并且知道我需要使用 css 过渡来使乙烯基在滚动时向下移动？你会怎么做呢？

Answer 1

应用于position:relative“乙烯基”元素，然后在其悬停状态下设置top:#px。

例如：

#vinyl {
 position: relative;
 /* transition properties here */
}

#vinyl:hover {
 top: 5px;
}

Answer 2

好吧，最简单的方法只涉及一个具有两个背景的元素。盖子是顶部的一个，另一个是乙烯基本身。

在 上hover，您只需更改background-position第二项的 。

演示

HTML 只是：

<div class='vinyl'></div>

CSS是：

.vinyl {
    width: 109px;
    height: 162px;
    margin: 135px auto;
    background: url(http://img842.imageshack.us/img842/7524/albumm.jpg) 
            no-repeat 0 100%,
        radial-gradient(circle, transparent 3%, navy 4%, navy 5%, #4774a2 5%, 
                #4774a2 8%, navy 8%, navy 9%, #4774a2 10%, #4774A2 20%, 
                black 21%, #1c1c1c, black 69%, transparent 70%) 
            no-repeat 50% 0%;
    background-size: 109px 109px;
    transition: .65s;
}
.vinyl:hover {
    background-position: 0 100%, 50% 95%;
}

---

如果您希望仅在将鼠标悬停在乙烯基本身上时发生过渡（封面上没有transition）hover，那么您需要使用两个元素。

演示- 我制作.vinyl了 的孩子.cover，给它定位并将其设置z-index为-1（这样它就会隐藏起来）。

HTML 现在是：

<div class='cover'>
    <div class='vinyl'></div>
</div>

CSS是：

.cover {
    width: 111px;
    height: 111px;
    margin: 135px auto;
    background: url(http://img842.imageshack.us/img842/7524/albumm.jpg);
}
.vinyl {
    position: relative;
    z-index: -1;
    top: -49%; left: 1.5%;
    width: 109px;
    height: 109px;
    border-radius: 50%;
    background: radial-gradient(transparent 3%, navy 4%, navy 5%, #4774a2 5%, 
                #4774a2 8%, navy 8%, navy 9%, #4774a2 10%, #4774A2 20%, 
                black 21%, #1c1c1c, black 69%, transparent 70%) no-repeat 50% 0%;
    background-size: 109px 109px;
    transition: .65s;
}
.vinyl:hover { top: -3%; }