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

さて、最も簡単な方法は、2つの背景を持つ1つの要素のみを含みます。カバーは一番上にあり、もう一方はビニール自体です。

で、 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トランジションをビニール自体にホバーしたとき（カバーにはない）にのみ発生させたい場合は、hover2つの要素を使用する必要があります。

デモ-私は.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%; }