Transition CSS de faire une image de déplacer vers le haut et vers le bas sur le vol stationnaire

http://imgur.com/bXU8I

J'ai cette image et je sais que je besoin pour utiliser css transition pour faire le vinyle se déplacer vers le bas lorsque défile sur? Comment voulez-vous faire?

OriginalL'auteur Joshua Hornby | 2012-08-22

  1. 5

    Appliquer position:relative à la "vinyle" élément, puis sur son état de pointage, ensemble top:#px.

    Par exemple:

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

#vinyl:hover {
 top: 5px;
}

    OriginalL'auteur Vin Burgh

  2. 2

    Bien, la façon la plus simple ne comporte qu'un seul élément avec deux milieux. La couverture est l'une sur le dessus et l'autre est le vinyle lui-même.

    Sur hover, il vous suffit de changer la background-position du deuxième élément.

    DÉMO

    HTML est juste:

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

    et le CSS est:

    .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%;
}

    Si vous voulez que la transition ne se produit qu'à planer sur le vinyle lui-même (pas de transition sur hover sur la couverture), puis vous aurez besoin d'utiliser deux éléments.

    DÉMO - J'ai fait .vinyl un enfant de .cover, elle a donné le positionnement et définir sa z-index à -1 (pour aller sous le capot).

    HTML est maintenant:

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

    et le CSS est:

    .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%; }

    OriginalL'auteur Ana