Hover animation for class not correct after first element

Hi all,

I have a grid with 5 items which all have a button and some headline text that I’m animating.
Now the first item works as intended, however all items after that do not act the same as the first item.

All items are set up the same way so they should work the same unless I’m overlooking something.

The animation should do the following:

  • Button moves down
  • Button fades to 0% Opacity
  • Text(headline) moves down

But from the second item upwards the text moves down further than the first item.

Here is my read-only link: Read only-link

Is this a bug or am I missing something?



On your first item, you made a div structure right but in the others, you put div: Grid_cases-text in the one more div with the same class like in the image. So there are two divs instead of one and it is moving twice as much as the first one. Just put it out in all items so it is only one div with that class and it should work.

Thanks! Spend to much time looking at the animation I just overlooked this.
Live saver!