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..

Answer 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;
}