CODEWITHSUNDEEP
csscss-animationsfont-awesome
alias51
alias51

Reputation: 8608

Animate font-awesome stack to spin icon on hover

I have a simple font awesome icon stack:

<span class="icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-flag icon-light"></i>
</span>

I am trying to think of a way to animate the icon on hover, using css alone. The effect I am trying to achieve is similar to the "social sharing" images here: http://demo.rocknrolladesigns.com/html/jarvis/shortcodes.html. (Apologies, you'll need to scroll as there is no #anchor).

This site uses offset on png images, but I'd like to try this with font-awesome and some CSS3. Any ideas?

EDIT

Attempted (failed!) implementation here: http://bootply.com/66542

Upvotes: 0

Views: 8056

Answers (2)

qwerty
qwerty

Reputation: 5246

Basically, have a fixed height/width on the .icon-stack. Have the exact same height on both child elements. This will cause the child elements to float below each other. From there on it's just a matter of animating it on hover. I used a negative top margin on hover to make it "scroll" up. The negative top margin has to be equal to the child elements height. To top it off I just used CSS transitions to animate it.

Toggle overflow: hidden; on/off to see how it works better.

Upvotes: 2

stefanbc
stefanbc

Reputation: 769

Maybe this is what you are looking for?

http://jsfiddle.net/VVeTw/

<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-flag icon-light first"></i>
<i class="icon-flag icon-light second"></i>
</span>

and the CSS

span {
    font-size: 50px;
    color: #fff;
}
.icon-stack-base {
    color: white;
}
.icon-light {
    color: black;
}
.icon-stack, .icon-stack-base, .icon-flag {
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    overflow: hidden;
}
i {
    height: 60px;
    width: 60px;
}
.icon-stack:hover {
    color: black;
    cursor: pointer;
}
.icon-stack:hover .icon-stack-base {
    color: #5b9a68;
}
.icon-stack:hover .first {
    margin-top: -80px;
}
.icon-stack:hover .second {
    color: white;
}

Upvotes: 4

Related Questions