css transition on multiple elements

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.

Unrelated to this issue, but minor typo in div class name. In case you use the class elsewhere in code it should be "transition" not "transistion" — mc01
– mc01, Commented Sep 19, 2014 at 16:40

LcSalazar · Accepted Answer · 2014-09-19 16:22:19Z

4

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/

answered Sep 19, 2014 at 16:22

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

koralarts Over a year ago

You forgot to include the icon in the transitions.

Collectives™ on Stack Overflow

css transition on multiple elements

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related