css transition on multiple elements - css

Question

I have multiple css transitions on different elements.
In my example, if you hover over the circle section the transitions occur on both the circle and the box color change underneath. However if you come out of the circle and into the box section, the circle transition does not occur
See fiddle for complete example: http://jsfiddle.net/Lsnbpt8r/
Heres my html:
div class="row">
<div class="col-sm-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-home icon"></i>
<h3 class="heading">
Construction
</h3>
<p>This is how we do it</p>
</div>
</div>
<div class="col-sm-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-wrench icon"></i>
<h3 class="heading">
Interior Design
</h3>
<p>This is how we do it</p>
</div>
</div>
<div class="col-sm-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i>
<h3 class="heading">
Service
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
Here's some of my css:
.circle {
width: 120px;
height: 120px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f3f3f3;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.circle:hover{
width: 100px;
height: 100px;
background: #f7f7f7;
}
.box{
border: 0px 1px 2px 1px solid #f1f1f1;
border-top: 5px solid #003176;
height: 200px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.box:hover{
background-color: #135379;
}
How can I make it so that whatever part of the section is hovered on all element transitions will take place ?
Cheers in advance.

Answer 1

It's because the effects are applied to each element's :hover:
.circle:hover{
width: 100px;
height: 100px;
background: #f7f7f7;
}
...
.circle-pos:hover{
margin-top: -50px;
}
So, if you hover the box, but not the circle, it won't have any effect. Instead, set the transition to the :hover of the common parent container, in this case, the .box div:
Updated Fiddle
.box:hover .circle{
width: 100px;
height: 100px;
background: #f7f7f7;
}
....
.box:hover .circle-pos{
margin-top: -50px;
}
EDIT
The same with the .icon:hover { if you want, it can be .box:hover .icon{: http://jsfiddle.net/Lsnbpt8r/3/