Can I use the hover state style to also ease out of the hover state?

jclarothe · September 28, 2016, 10:25pm

More specifically, I am adding a border to a link div on hover that takes 500 ms to move in, but then when the cursor moves off of the div block, its a hard transition. Can I ease the release from the hover state?

I’d prefer to keep it simple and use the hover state rather than creating effects.

Thanks!

DFink · October 8, 2016, 6:21am

If you have added a transition to the element for the border, it should do both. But sometimes borders cause problems, instead I use inner glows set to look like borders because they don’t affect the size of the div at all. Try that instead.

jclarothe · October 21, 2016, 6:42pm

Thanks DFink!

That doesn’t quite solve the problem because I actually like the image shrinking that occurs when I use the border. But whether I use border or a hard inner shadow like you suggest, I still get a sudden (unanimated) transition when hover is released.

Take a look at the project thumbs here if you would like to see what I mean. www.jordanrothe.com

Waldo · October 21, 2016, 6:50pm

Hi @jclarothe it looks like in your static state of the element you have no borders at all so there is nothing to fade back to. For your static state just set the border to be there but at 0px width and it should resolve the issue on hover out

jclarothe · October 21, 2016, 8:35pm

Thanks Waldo! You are literally the reason I stick with webflow.

/////
Jordan Rothe
510 326 3518
hello@jordanrothe.com

system · December 21, 2016, 5:41pm

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