Element Filtering Using HTML5 and CSS3 using :checked

by joshvogt

HTML

<section>

    
    <input type="radio" name="filter" title="All" data-filter="all">
    <input type="radio" name="filter" title="Red" data-filter="red">
    <input type="radio" name="filter" title="Green" data-filter="green">
    <input type="radio" name="filter" title="Blue" data-filter="blue">
    
      
<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="red"></div>
<div data-filter="red"></div>
<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="green"></div>
</section>

CSS

section{
  display:block;
  float:left;
  border:2px solid green;
  min-height:300px;
  width:100%;
  border-radius:4px;
}

input[type="radio"]{
    display:block;
    float:left;
    width:25%;
    margin:0;
}

input[type="radio"]::before{
  content:attr(title);
  display:block;
  float:left;
  width:100%;
  text-decoration:none;
  text-align:center;
  padding:5px 0;
  color:black;
  background:#1271C7;
    position:relative;
    z-index:20;
}

div{
 display:block;
 float:left;
 height:40px;
 width:40px;
 border:1px solid black;
 margin:10px;
 -webkit-transition:all .8s linear;
 -moz-transition:all .8s linear;
 -o-transition:all .8s linear;
 -ms-transition:all .8s linear;
 transition:all .8s linear;
 margin-top:20px;
}

div[data-filter="red"]{
  background:red;

}

div[data-filter="green"]{
  background:green;
}

div[data-filter="blue"]{
  background:blue;
}



input[data-filter]:checked{
    opacity:.8;
     outline:none;
}

input[data-filter="red"]:checked ~ div:not([data-filter="red"]){
  height:0px;
  width:0px;
  border:none;
  margin:0;
}

input[data-filter="green"]:checked ~ div:not([data-filter="green"]){
  height:0px;
  width:0px;
  border:none;
  margin:0;
}

input[data-filter="blue"]:checked ~ div:not([data-filter="blue"]){
  height:0px;
  width:0px;
  border:none;
  margin:0;
}

input[type="radio"]:checked:not([data-filter="all"]) ~ div:hover{
    height:80px;
    width:80px;
}