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; }
<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>