HTML
<div class="col-sm-6">
<div id="dragon">
<img id="torso" class="img-responsive absolute" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/dragonBody.png">
<img id="dragJawUp" class="img-responsive absolute" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/dragJawUp.png">
<img id="dragJawDown" class="img-responsive absolute"src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/dragJawLow.png">
<img id="fire" class="img-responsive absolute" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/dragonFire.jpg">
</div>
CSS
@import "compass";
.absolute {
position: absolute;
}
#dragon {
width: 24.5em;
height: 24.25em;
margin: 5% auto;
position: relative;
overflow: hidden;
}
#torso {
z-index: 2;
}
#dragJawUp, #dragJawDown {
z-index: 3;
@include transform-origin(48%,58%);
@include transition(transform .5s cubic-bezier(.5,1.5,.25,1));
}
#dragJawUp {
@include transform-origin(55%,65%);
@include transition(transform .5s cubic-bezier(.5,1.5,.25,1));
}
#fire {
width: 12em;
z-index: 1;
@include translate3d(50%,90%,0);
@include transition(transform .2s ease-out, opacity 1s);
opacity: 0;
}
/* transitions */
#dragon:hover #dragJawUp {
@include transform(rotate(-18deg));
}
#dragon:hover #dragJawDown {
@include transform(rotate(15deg));
}
#dragon:hover #fire {
@include transform(translate3d(107%,167%,0));
opacity: 1;
}
