CODEWITHSUNDEEP
htmlcsscss-transitions
Joshua Hornby
Joshua Hornby

Reputation: 383

CSS Transition making a image move up and down on hover

https://i.sstatic.net/os34f.jpg

I have this image and know i need to use css transition to make the vinyl move down when scrolled over? How would you go about doing this?

Upvotes: 4

Views: 38095

Answers (2)

Ana
Ana

Reputation: 37179

Well, the simplest way only involves one element with two backgrounds. The cover is the one on top and the other one is the vinyl itself.

On hover, you simply change the background-position of the second item.

DEMO

HTML is just:

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

and the CSS is:

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

If you want the transition to happen only on hover on the vinyl itself (no transition on hover on the cover), then you'll need to use two elements.

DEMO - I've made .vinyl a child of .cover, gave it positioning and set its z-index to -1 (so that it would go under the cover).

HTML is now:

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

and the CSS is:

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

Upvotes: 1

Vin Burgh
Vin Burgh

Reputation: 1419

Apply position:relative to the "vinyl" element, then on its hover state, set top:#px.

For example:

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

#vinyl:hover {
 top: 5px;
}

Upvotes: 7

Related Questions