Как сделать изображение подпрыгивая над текстом логотипа, пока мышь зависает?

Question

Я пытаюсь создать что-то вроде this, где изображение логотипа будет появляться над текстом моего логотипа, когда мышь нависает над ним. Я могу заставить текст исчезать, но я не могу заставить логотип отскакивать в части заголовка.

#logo-bunny { 
 
    background: url(../images/logo-bunny.png); 
 
    position: absolute; 
 
    top: 84px; 
 
} 
 

 
.RI-logo { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    top: 0; 
 
    overflow: hidden; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.RI-logo:hover { 
 
    transition: 0.25s; 
 
    -o-transition: 0.25s; 
 
    -ms-transition: 0.25s; 
 
    -moz-transition: 0.25s; 
 
    -webkit-transition: 0.25s; 
 
    opacity: 0; 
 
} 
 
.RI-logo:hover ~ #logo-bunny { 
 
    top: -20px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<a class="navbar-brand RI-logo" href="/">Resonance Inn 
 
    <div id="logo-bunny"> 
 
    </div> 
 
</a>

Answer 1

Попробуйте с использованием cssanimation

#logo-bunny { 
 
    background: url(http://lorempixel.com/50/50/animals); 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 50px; 
 
    opacity:0; 
 
} 
 

 
.RI-logo { 
 
    height:100px; 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    top: 50px; 
 
    /*overflow: hidden;*/ 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.RI-logo:hover { 
 
    transition: 0.25s; 
 
    -o-transition: 0.25s; 
 
    -ms-transition: 0.25s; 
 
    -moz-transition: 0.25s; 
 
    -webkit-transition: 0.25s; 
 
    color:transparent; 
 
} 
 

 
.RI-logo:hover > #logo-bunny { 
 
    animation: popup 1500ms ease-in-out 0s both; 
 
    -moz-animation: popup 1500ms ease-in-out 0s both; 
 
    -ms-animation: popup 1500ms ease-in-out 0s both; 
 
    -o-animation: popup 1500ms ease-in-out 0s both; 
 
    -webkit-animation: popup 1500ms ease-in-out 0s both; 
 
} 
 

 
@keyframes popup { 
 
    0% { 
 
    top:50px; 
 
    opacity:0; 
 
    } 
 
    50% { 
 
    top:-45px; 
 
    } 
 
    100% { 
 
    top:-10px; 
 
    opacity:1; 
 
    } 
 
} 
 

 
@-moz-keyframes popup { 
 
    0% { 
 
    top:50px; 
 
    opacity:0; 
 
    } 
 
    50% { 
 
    top:-45px; 
 
    } 
 
    100% { 
 
    top:-10px; 
 
    opacity:1; 
 
    } 
 
} 
 

 
@-o-keyframes popup { 
 
    0% { 
 
    top:50px; 
 
    opacity:0; 
 
    } 
 
    50% { 
 
    top:-45px; 
 
    } 
 
    100% { 
 
    top:-10px; 
 
    opacity:1; 
 
    } 
 
} 
 

 
@-webkit-keyframes popup { 
 
    0% { 
 
    top:50px; 
 
    opacity:0; 
 
    } 
 
    50% { 
 
    top:-45px; 
 
    } 
 
    100% { 
 
    top:-10px; 
 
    opacity:1; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<a class="navbar-brand RI-logo" href="/">Resonance Inn 
 
    <div id="logo-bunny"> 
 
    </div> 
 
</a>