Different animation on hover out from element

JavaScript
1

Hi,

I have a btn which I want to have different hover in/out animations on.

I have made a pen and it works as I want it to the FIRST time you hover in/out. But since the position of the element i’m animating isn’t reset after hover out it’s not working as intended the second and onwards time you hover it. Anyone know how I can fix this?

Here is the pen: http://codepen.io/ReGGae/pen/GpLdbw?editors=011

TDRL: First time you hover it works as intended, after that it doesnt.

2

Using Firefox latest Win 10

Is this not how you intended?

.

3

Hi there ReGGaeBOSS,

I see no need to use an entire “JavaScript Library” for this little task. :arrow_heading_down:

[code]

untitled document html, body { height:100%; margin:0; } body { font-family:'helvetica-neue',arial,sans-serif; font-size:16px; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -webkit-justify-content: center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; } .btn,.btn span { position:relative; display:inline-block; background-color:#00f; line-height:2.75rem; padding:0 2rem; font-size:0.75rem; color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:0.05rem; overflow:hidden; } .btn::before { content:'Contact us'; } .btn span{ position:absolute; left:0; top:-101%; z-index:1; background-color:#000; transition:0.5s ease-in-out; } .btn:hover span { top:0%; } Contact us [/code]

coothead

4

hi,

Maybe I wasn’t clear enough in the topic, but what I want is the “hover element” to go out in the opposite direction to which it enters. The first time you hover the button upon loading the pen the animation is correct.

5

Hi there ReGGaeBOSS,

here is a possible solution…

[code]

untitled document html, body { height:100%; margin:0; } body { font-family:'helvetica-neue',arial,sans-serif; font-size:16px; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -webkit-justify-content: center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; } .btn,.btn span { position:relative; display:inline-block; background-color:#00f; line-height:2.75rem; padding:0 2rem; font-size:0.75rem; color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:0.05rem; overflow:hidden; transition:0.5s ease; } .btn::before { content:'Contact us'; } .btn span { position:absolute; left:0; top:100%; z-index:1; background-color:#000; } Contact us [/code]

coothead

6

This is pretty close with CSS only for modern browsers.

7

Cool.

I managed to do this with CSS only: http://codepen.io/ReGGae/pen/yYWeod?editors=110#0

Skipped the text on the hover element tho.

And btw, how do I embed pens? None of the embed options work for me?

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.