CSS-Only Content Filter (checkbox hack)

These demos use the CSS3 "not:" selector, in combination with the checkbox hack, to filter items based on a class.

Works in modern browsers and IE9+. No fade effect in IE9.

Demo 1

Demo using opacity with animation. Selection does NOT collapse because the items remain in the document flow.

Filter:

Demo 2

Demo using display:block; Items are removed from the document flow.

Filter:

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.