I want to create a dynamic gallery showcasing photos, CSS3 animations, HTML5 elements, and jQuery code snippets. Can someone help me with implementing filtering using plain jQuery? Here's the code snippet:

      <!-- Filter Starts -->
    <div class="container">
      <div class="row safezone">
        <ul class="filters">
          <li><a href="#" title="All">All</a></li>
          <li><a href="#" title="CSS3">CSS3</a></li>
          <li><a href="#" title="jQuery">jQuery</a></li>
          <li><a href="#" title="Mobile">Mobile</a></li>
          <li><a href="#" title="Photos">Photos</a></li>
          <li><a href="#" title="UI">User Interfaces</a></li>
          <li><a href="#" title="Wireframes">Wireframes</a></li>
          <li><a href="#" title="Others">Others</a></li>          
        </ul>
      </div>
    </div>
    <!-- Filter Ends -->

<div class="container">
  <div class="row">
  <!-- gal cont-->
  <div id="masonry">
    <div class="mitem">
      <h3>CSS3 Animation</h3>
      <p>Text underline animation on mouse hover.</p>
      <p class="textanim">“<a href="javascript:void();"><strong>True love is born</strong></a> from understanding.”</p>
    </div>
    <div class="mitem box">
      <h3>CSS3 Circles</h3>
      <div class="circle-text"><p>Circles with pure CSS3</p></div>
    </div>
    <div class="mitem box">jQuery</div>
    <div class="mitem box">Mobile</div>
    <div class="mitem box">jQuery</div>
    <div class="mitem box">Wireframes</div>
    <div class="mitem box">Other</div>
    <div class="mitem box">UI</div>
    <div class="mitem box">UI</div>

    <div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200/sports" /></div>
    <div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200/sports/Dummy-Text" /></div>      
    <div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200" /></div>      


</div>
  <!-- /gal cont -->
  </div>
</div>



var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
  columnWidth: 220,
  itemSelector: '.mitem'
});



@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Satisfy');
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100");

/* Syntaxes for quick reference
transition: <property> <duration> <timing-function> <delay>;

=============================== */

/**  Basic Page CSS **/
body {
  font-family: 'Roboto Slab', serif;
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 2em;
}
body.playground { background-color: #EAEDF1;  }

h1, h2, h3, h4, h5, h6 {  
  font-family: 'Cinzel', serif, sans-serif; 
  font-weight: 400;
  margin: 0;
}
.safezone { padding-top: 80px;  }
.borders { border:1px solid  red; }

/* Masonry */
.mitem {
  width: 200px;
  float: left;
    font-size: .85em;
    background: #fff;
    padding: 1em;    
    /*box-shadow: 1px 1px 2px 1px #e3e3e3;*/
    margin-bottom: 2em;
    border-radius: 2px; 
}
.mitem img { border:none; padding: 0; margin: 0; border-radius: 2px; }
#masonry h3 { font-size: 0.9em; font-weight: 600; color: #2C77F8; text-align: center; border-bottom: 0px dotted #78A8FF; margin: 0 0 10px 0; }
/* /Masonry */

/* CSS3 Circles  */
.circle-text {
    width:150px;
}
.circle-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 100%;
    background: #4679BD; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    /*background-image: linear-gradient(to right bottom, #22B009 0%, #4679BD 100%);*/
    box-shadow: 3px 4px 3px #ccc;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.circle-text p {
    float:left;
    width:100%;
    padding-top:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    color:white;
}
/* =====================  */

/* text underline animation on hover 
======================================*/
 p.textanim > a {
    position: relative;
    color: #f00;
    text-decoration: none;
  }

  p.textanim > a:hover {
    color: #f00;
    text-decoration: none;
  }
  p.textanim > a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #f00;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
  p.textanim > a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 /* ========================================== */


 /* CSS3 Box enlarge on hover 
 ==============================*/
.box:hover {  
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transform: scale(1);
  border-radius: 4px;
  color: #111;
  transition: all 0.2s ease-in-out 0s;
}
 /* =================================== */


 /* Filters 
 ==============================*/
ul.filters { list-style: none; margin: 0 auto 2em auto; }
ul.filters li { display: inline-block; border-right: 1px dotted #aaa; padding-right: 1em; margin-right: 1em; }
ul.filters li:last-child { border-right: none; }
ul.filters li a { text-decoration: none; font-size: 0.8em; padding: 5px 10px; border-radius: 20px; }
ul.filters li a:hover { text-decoration: none; background-color: #0095DD; color: #fff; transition: all 0.2s ease-in-out 0s; }
 /* =================================== */ }
}
}
}

Check out the code on jsfiddle: https://jsfiddle.net/tosrisri/thqL2Lf1/2/