Activating more the one transition on mouse hover - html

Question

In my css I have 3 cogs, I want when I hover one of the cogs, that the other 2 cogs also get activated.
My codes:
CSS
#box_1{
border: 1px solid red;
display: block;
position: relative !important;
width: 200px;
height: 200px;
}
.object1 {
position: absolute !important;
}
.cog1 {
top: 18%;
left: 5%;
}
.object2 {
position: absolute !important;
}
.cog2 {
top: 8%;
left: 54%;
}
.object3 {
position: absolute !important;
}
.cog3 {
top: 60%;
left: 54%;
}
.object1 {
position: absolute;
transition: all 20s ease-in;
-webkit-transition: all 20s ease-in; /** Chrome & Safari **/
-moz-transition: all 20s ease-in; /** Firefox **/
-o-transition: all 20s ease-in; /** Opera **/
}
#axis1:hover .rotate360cw {
transform: rotate(3600deg);
-webkit-transform: rotate(3600deg);
-o-transform: rotate(3600deg);
-moz-transform: rotate(3600deg);
}
.object2 {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#axis2:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
.object3 {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#axis3:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
HTML
<div id="box_1">
<div id="axis1"><img class="object1 cog1 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg.png" width="128" height="128" /></div>
<div id="axis2"><img class="object2 cog2 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg1-e1390559689165.png" width="64" height="64" /></div>
<div id="axis3"><img class="object3 cog3 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg2-e1390559748608.png" width="64" height="64" /></div>
</div>
Check this at fiddle here.
How can I achieve this?

Answer 1

try adding this to your css
#box_1:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
Not 100% thats the result you want.
DEMO
Peace.

Answer 2

Add, for instance:
#axis1:hover ~ div > img {
-webkit-transform: rotate(-360deg) !important;
}
Same can be done also for #axis2:hover ~ div > img. Unfortunately CSS can't ascend so therefore you can't declare a rule which would apply from cog2 to cog1 or from cog3 to cog2/cog1. This could only be solved with JavaScript.

Answer 3

You cannot archive this with siblin selectors, since you cannot ascent in CSS (you cannot affect .cog1 when hovering .cog3).
An idea is to give the container the effect trigger:
#box1:hover img[class*="cog"] {
niceHoverEffect
}