Activating more the one transition on mouse hover

Problem

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?

Problem courtesy of: Laurens Hoogland

Solution

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.

Solution courtesy of: vaskort

Discussion

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.

Discussion courtesy of: zvona

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

}
Discussion courtesy of: Wakkos

This recipe can be found in it's original form on Stack Over Flow.