I have a content where I have items tagged within different categories. All are displayed as block div's; all are identical.

There is an option to hide/unhide certain categories of items. Hidden items are marked as `display:none` and the rest stays the same.

Normally, as you can imagine, rest of the items instantly fill-up the space left from the hidden items. However, I want this to happen with a CSS position transition so things don't happen instantly but happen over time instead.

Just to make things easier for testing, I've added this bit to my CSS file:

```
*{
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

```

Here is a codepen link:

<http://codepen.io/zettam/pen/bazqF>

When the "hidden" class is added to the item, the item is disappearing instantly therefore no transition is happening. Any ideas on how to make this transition/repositioning possible?