▼
Streaming live at 10am (PST)

Hover Animation Issue

Design help General
#1

Hey Guys,

i want to hover-animate a Div in a Section. You can see it in the 3rd Section in the read only-mode. There are 2 Div´s with both 50% covering the whole Section. They are backgrounded with each an image and on the top of it, you can see “Hover me”-Text. When you hover the left one, it appears a little Paragraph.

Now, The Hover-On Animation should be as it is, but as soon as you left the Hover-State, the white border (which covers the image on hover-state) around is moving immediately to the position, as it was before the hovering, but not smooth, but very fast, which does´nt look nice at all. I want it to be more smoothier, when you left the hover-state.

Here´s the Link: https://preview.webflow.com/preview/luasdesign?utm_source=luasdesign&preview=bf0b11db35eab046cdc43d3aacd1c293

Hope you understand my concern.

kind regards

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Anyone with a solution? :slight_smile:

#3

You have to define the border at the normal state. Set it to 0px. You can set your transition to 100ms to well observe the effects fifference.

Also here you’re using the border to make the effect, I would have maybe use the inner shadow. In that case, same happens: you have to define the inner shadow at zero on the normal state so it has something to transition back to it.

Also don’t use ALL for the transition, it really is too demanding in terms of power and will alter performances of the page.

1 Like
#4

Why didn’t i came up to that by myself​:man_shrugging::smiley: But thank you for helping out!:blush: i will remind your tips for the future.