The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hover-Animation works in wrong order when unhovering

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #204780

    Dear Community,
    I wanted to make a small preview of qualifications (just for fun, I’m still in school and therefore no expert in neighter of them ^^) and wanted them to expand on hovering. But when I un-hover, they collapse an order that is logical (due to the delay) but I want them to collapse different.
    Here is the CodePen, I hope you get the Point:

    I want them to expand like they do, first down and then to the sides and collapse first the sides together and then up…


    PS: I have no clue why they aren’t displayed so weird in CodePen, on my side they are all the same size:

    PS2: Sorry for my bad english, I’m not a native speaker :)


    You can’t really do that with a simple hover & transition AFAIK.

    You’d probably need two separate animations one on the default state and another on the hover.

    Or Javascript…which would be more appropriate for this kind of effect.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.