CSS轉換製作的圖像上下移動懸停

Question

http://imgur.com/bXU8I

我有這樣的形象，知道我需要使用CSS過渡，使滾動時，在乙烯下移？你會如何去做這件事？

Answer 1

將position:relative應用於「vinyl」元素，然後在其懸停狀態下設置top:#px。

例如：

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

#vinyl:hover { 
top: 5px; 
} 

Answer 2

好，最簡單的方法只涉及兩個背景的一個元素。封面是上面的那個，另一個是乙烯基本身。

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

DEMO

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），那麼你需要使用兩個elem經濟需求。

DEMO - 我做了.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%; }