Forums

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
    Posts
  • #204780
    Anton
    Participant

    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: http://codepen.io/AntonOe/pen/xGWvOe

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

    Thanks,
    Anton

    PS: I have no clue why they aren’t displayed so weird in CodePen, on my side they are all the same size: https://anton-aho.c9.io/

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

    #204783
    Paulie_D
    Member

    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.