Pure CSS Content Filter

by kachibito

HTML

<section>
  <a href="javascript:void(0)" class="all" tabindex="-1">All</a>
  <a href="javascript:void(0)" class="pink" tabindex="-1">pink</a>
  <a href="javascript:void(0)" class="green" tabindex="-1">green</a>
  <a href="javascript:void(0)" class="blue" tabindex="-1">blue</a>
  <div class="pink"><p>01</p></div>
  <div class="blue"><p>02</p></div>
  <div class="green"><p>03</p></div>
  <div class="pink"><p>04</p></div>
  <div class="blue"><p>05</p></div>
  <div class="green"><p>06</p></div>
  <div class="blue"><p>07</p></div>
  <div class="green"><p>08</p></div>
  <div class="pink"><p>09</p></div>
  <div class="blue"><p>10</p></div>
  <div class="green"><p>11</p></div>
  <div class="blue"><p>12</p></div>
  <div class="green"><p>13</p></div>
  <div class="blue"><p>14</p></div>
  <div class="green"><p>15</p></div>
  <div class="pink"><p>16</p></div>
  <div class="green"><p>17</p></div>
  <div class="pink"><p>18</p></div>
  <div class="pink"><p>19</p></div>
  <div class="blue"><p>20</p></div>
  <div class="green"><p>21</p></div>
  <div class="pink"><p>22</p></div>
  <div class="blue"><p>23</p></div>
  <div class="green"><p>24</p></div>
</section>

CSS

body {
    width: 625px;
    margin-left: auto;
    margin-right:auto;
    font-family:"Myriad Pro", "Myriad Web", Myriad, Frutiger, Calibri, sans-serif, Arial Black, Gadget;
    background: #fff;
}
section {
    display:block;
    float:left;
    width:100%;
}
a {
    display:block;
    float:left;
    width:24.6%;
    text-decoration:none;
    text-align:center;
    padding:7px 0;
    margin:1px;
    color:#555;
    background:#eee;
    font-weight:bold;
    font-size: 15px;
    border-bottom:1px solid #ddd;
    -webkit-transition:all .5s linear;
    -moz-transition:all .5s linear;
    -o-transition:all .5s linear;
    -ms-transition:all .5s linear;
    transition:all .5s linear;
}
a:hover{
    border-bottom:1px solid #b9b9b9;
    background:#ddd;
}
div {
    display:block;
    float:left;
    height:153px;
    width:153px;
    margin:1px;
    text-align:center;
    -webkit-transition:all .5s linear;
    -moz-transition:all .5s linear;
    -o-transition:all .5s linear;
    -ms-transition:all .5s linear;
    transition:all .5s linear;
}
div p{line-height:158px;
    color:#eee;
    font-size: 20px ;
}
div[class="pink"] {
    background:#f7c7de;
}
div[class="green"] {
    background:#b5cb94;
}
div[class="blue"] {
    background:#7bcbc6;
}
a:focus[class] {
    background: #ebebeb;
    outline:none;
}
 a[class="pink"]:focus ~ div:not([class="pink"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
}
 a[class="green"]:focus ~ div:not([class="green"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
}
 a[class="blue"]:focus ~ div:not([class="blue"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
}