Multiple hover effect

Question

I am a novice.. I want to hover on the bottle and have the bottle rotate. At the same time I want to show the pouring and puddling animation. I don't know how I can get multiple animation to start with a single hover. Here is the CSS for it:

/*CSS ANIMATION*/

@-webkit-keyframes bottle {
0% {
    height: 67px;
}
7% {
    height: 67px;
}
95% {
    height: 0px;
}
100% {
    height: 0;
}
}


@-moz-keyframes bottle {
0% {
    height: 67px;
}
7% {
    height: 67px;
}
95% {
    height: 0px;
}
100% {
    height: 0;
}
 }

#bottle {
position: absolute;
top: 1055px;
right: 490px;
-webkit-transition: all .2s linear;
}

#bottle:hover {
-moz-transform: rotate(165deg);
-webkit-transform: rotate(165deg);
transform: rotate(165deg);
-webkit-transition: all .2s linear;
}

@-webkit-keyframes pour {
0% {
    background-position: 0 0;
    height: 0;
}
5% {
    background-position: 0 0;
    height: 0;
}
10% {
    background-position: 0 0;
    height: 75px;
    width: 4px;
}
95% {
    background-position: 0 0;
    height: 120px;
    width: 4px;
}
100% {
    background-position: 0 0;
    height: 170px;
    width: 4px;
}
}

@-webkit-keyframes puddle {
10% {
    height: 30px;
}
15% {
    height: 30px;
}
98% {
    height: 50px;
}
100% {
    height: 0;
}
}

#pour {
position: relative;
right: -55px;
top: -25px;

}

#puddle {
position: relative;
top: -50px;
opacity: 1;
right: -20px;
}

#contents1:hover {
-moz-animation: bottle 5s linear 1 forwards;
-webkit-animation: bottle 5s linear 1 forwards;
animation: bottle 5s linear 1 forwards;
}

#contents2:hover {
display: block;
-moz-animation: pour 2s linear 1;
-webkit-animation: pour 2s linear 1;
animation: pour 2s linear 1;
}

#contents3:hover {
-moz-animation: puddle 10s linear 1;
-webkit-animation: puddle 10s linear 1;
animation: puddle 10s linear 1;
}

Now I need to know how to connect contents2:hover and contents3:hover with the bottle:hover. I mean just by hovering over the bottle, how can I set contents2 and contents3 in motion?

As you guys have requested i ve uploaded everything to JSFiddle.. This is the link http://jsfiddle.net/shettyrahul8june/8tkKK/2/

And for fullscreen jsfiddle.net/shettyrahul8june/8tkKK/2/embedded/result/

For some reasons the bottle.png is not being displayed in the editors link but works fine in fullscreen.. This is the link for the image s26.postimg.org/s07bc6gvp/bottle.png .... All i want is to the bottle to rotate and pour the liquid and then comes the puddle.. All should happen with single bottle hover.. I'm not simply relying on people.. I've worked hard but couldn't get it right.. Also if someone could put light on how to maintain the resolution of the webpage, it'd be a great help.. Hope i am precise.. Please do help because many are searching for this and this could be their ultimate stop..

I haven't tested this, just a thought, what if you didn't use id's for content1 and content2 (hovers), and instead made them into classes and add them to the class set of the #bottle object.(hopefully the #bottle classes will trigger them). — nocturns2
– nocturns2, Commented Jan 2, 2014 at 18:07
I'll upload the code.. That'll give a precise i dea i guess.. — shet_tayyy
– shet_tayyy, Commented Jan 3, 2014 at 5:14

Surjith S M · Accepted Answer · 2014-01-03 06:39:18Z

1

You are looking for Tilde ~ selector in CSS

Working Demo and Source

CSS

#bottle:hover ~ #pour {
    display: block;
    -moz-animation: pour 2s linear 1;
    -webkit-animation: pour 2s linear 1;
    animation: pour 2s linear 1;
}
#bottle:hover ~ #puddle {
    -moz-animation: puddle 10s linear 1;
    -webkit-animation: puddle 10s linear 1;
    animation: puddle 10s linear 1;
}

answered Jan 3, 2014 at 6:39

Surjith S M

6,7502 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple hover effect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related