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.

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

}