Css transition to multiple elements
I have multiple css transitions for different elements.
In my example, if you hover over a circular section, the transitions occur both around the circle and by changing the color of the box. However, if you exit the circle and into the box, the circle does not transition.
See full example text: http://jsfiddle.net/Lsnbpt8r/
Here is 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 are 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 any part of the section hangs in all element transitions?
Greetings in advance.
source to share
This is because the effects are applied to every element :hover
:
.circle:hover{
width: 100px;
height: 100px;
background: #f7f7f7;
}
...
.circle-pos:hover{
margin-top: -50px;
}
So, if you hover over the box, but not the circle, it will have no effect. Instead, set the transition to a :hover
common parent container, in this case a .box
div:
.box:hover .circle{
width: 100px;
height: 100px;
background: #f7f7f7;
}
....
.box:hover .circle-pos{
margin-top: -50px;
}
EDIT
Same with .icon:hover {
if you want it could be .box:hover .icon{
: http://jsfiddle.net/Lsnbpt8r/3/
source to share