Activating more the one transition on mouse hover

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.