WP post category filter

dabblet.css

/*
WP post category filter
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

* {
  position: relative;
  box-sizing: padding-box;
}

.sticky{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}

.post {
  width:width:220px;
  float: left;
  border: 5px solid red;
}
div.thumbnail-container {
  width: 200px;
  height: 200px;
  background-position: center top;
  background-repeat: no-repeat;
  margin-right: 10px;
  display: inline-block;
  border: 10px solid black;
  border-radius: 50%;
  overflow: hidden;
}
div.thumbnail-inner {
  width: 200px;
  height: 200px;
  background-image: inherit;
  background-position: center bottom;
  border-radius: 50%;
}
div.thumbnail-container, div.thumbnail-inner {
  transition: border-radius 1s ease, opacity 1s ease;
}
.thumbnail-inner a {
  display:block;
  width: 200px;
  height: 200px;
}
div.thumbnail-container:hover {
  border-radius: 12.5%;
  transition: border-radius 0.5s ease;
}
div.thumbnail-container:hover > div {
  border-radius: 12.5%;
  opacity: 0;
  transition: border-radius 0.5s ease, opacity 0.5s ease;
}
span.entry-date, span.cat-links {
  display: inline-block;
  margin: auto;
}
div#nav-below {
  clear: both;
}
input#bpostfilter-flyers[type=radio]:checked ~ div.category-flyers div.thumbnail-inner {
  transition: opacity 0.5s ease;
  opacity: 0;
}

input#bpostfilter-packaging[type=radio]:checked ~ div.category-packaging div.thumbnail-inner {
  transition: opacity 0.5s ease;
  opacity: 0;
}

dabblet.html

<input type="radio" name="bpostfilter" id="bpostfilter-flyers"><label for="bpostfilter-flyers">Flyers</label>
<input type="radio" name="bpostfilter" id="bpostfilter-packaging"><label for="bpostfilter-packaging">Packaging</label>
<input type="radio" name="bpostfilter" id="bpostfilter-video"><label for="bpostfilter-video">Video</label>
<input type="radio" name="bpostfilter" id="bpostfilter-animation"><label for="bpostfilter-animation">Animation</label>
<input type="radio" name="bpostfilter" id="bpostfilter-print"><label for="bpostfilter-print">Print</label>
<input type="radio" name="bpostfilter" id="bpostfilter-web"><label for="bpostfilter-web">Web</label>

<div class="post-434 post type-post status-publish format-gallery hentry category-packaging category-print" id="post-434">
	<div style="background-image:url('http://www.blimpage.com/portfolio/wp-content/uploads/m2f-2012-1-11.jpg') !important;" class="thumbnail-container">
		<div class="thumbnail-inner"><a href="http://www.blimpage.com/portfolio/cd-artwork-music2face-5/"></a></div>
	</div>
	<div class="entry-meta">
		<span class="entry-date">March 2012</span><br>
		<span class="cat-links"><a rel="category tag" title="View all posts in Packaging" href="http://www.blimpage.com/portfolio/category/packaging/">Packaging</a>, <a rel="category tag" title="View all posts in Print" href="http://www.blimpage.com/portfolio/category/print/">Print</a></span>
	</div>
</div>

<div class="post-345 post type-post status-publish format-gallery hentry category-flyers category-print" id="post-345">
	<div style="background-image:url('http://www.blimpage.com/portfolio/wp-content/uploads/6uap4xba.jpg') !important;" class="thumbnail-container">
		<div class="thumbnail-inner"><a href="http://www.blimpage.com/portfolio/flyer-summer-strings/"></a></div>
	</div>
	<div class="entry-meta">
		<span class="entry-date">March 2012</span><br>
		<span class="cat-links"><a rel="category tag" title="View all posts in Flyers" href="http://www.blimpage.com/portfolio/category/flyers/">Flyers</a>, <a rel="category tag" title="View all posts in Print" href="http://www.blimpage.com/portfolio/category/print/">Print</a></span>
	</div>
</div>

<div class="post-425 post type-post status-publish format-gallery hentry category-packaging category-print" id="post-425">
	<div style="background-image:url('http://www.blimpage.com/portfolio/wp-content/uploads/sc9qvwcz.jpg') !important;" class="thumbnail-container">
		<div class="thumbnail-inner"><a href="http://www.blimpage.com/portfolio/cd-artwork-music2face-4/"></a></div>
	</div>
	<div class="entry-meta">
		<span class="entry-date">February 2012</an><br>
		<span class="cat-links"><a rel="category tag" title="View all posts in Packaging" href="http://www.blimpage.com/portfolio/category/packaging/">Packaging</a>, <a rel="category tag" title="View all posts in Print" href="http://www.blimpage.com/portfolio/category/print/">Print</></span>
	</div>
</div>

<div class="post-341 post type-post status-publish format-gallery hentry category-flyers category-print" id="post-341">
	<div style="background-image:url('http://www.blimpage.com/portfolio/wp-content/uploads/878oso1r.jpg') !important;" class="thumbnail-container">
		<div class="thumbnail-inner"><a href="http://www.blimpage.com/portfolio/flyer-the-statics-10/"></a></div>
	</div>
	<div class="entry-meta">
		<span class="entry-date">December 2011</span><br>
		<span class="cat-links"><a rel="category tag" title="View all posts in Flyers" href="http://www.blimpage.com/portfolio/category/flyers/">Flyers</a>, <a rel="category tag" title="View all posts in Print" href="http://www.blimpage.com/portfolio/category/print/">Print</a></span>
	</div>
</div>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}