<div>
    
  <h1>Combining CSS3 Filters to Enhance your Image Galleries</h1>
    <p>As of this writing, CSS3 filters are only supported in the latest version of <strong>Chrome</strong> and <strong>Chrome Canary</strong>.</p>
      
    <h2 id="gal-one">Hue-Rotate and Animate</h2>
    <ul class="gal-1">
        
        <li><img src="https://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
        
    </ul>
    
    <h2 id="gal-two">Blur, Grayscale and Transform(scale)</h2>
    <ul class="gal-2">
        
        <li><img src="https://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
        
    </ul>
    
    <h2 id="gal-three">Sepia, Brightness and Opacity</span></h2>
    <ul class="gal-3">
        
        <li><img src="https://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
        
    </ul>
    
    <h2 id="gal-four">Grayscale and Brightness</h2>
    <ul class="gal-4">
        
        <li><img src="https://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
        
        <li><img src="https://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
        
    </ul>

</div>

div {
  width:40%;
  min-width:300px;
  margin:0 auto;
  font-size:100%;
}

div:after {
  content:"";
  display:block;
  clear:both;
  height:50px;
}

h1 {
  font:bold 1.2em Arial, Helvetica, sans-serif;
  padding:10px;
  background:#eee;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border:2px dashed #ccc;
  color:#333;
}

h1 a {
  display:block;
  font:normal 0.5em "Times New Roman", Times, serif;
  text-transform:uppercase;
  letter-spacing:0.2em;
  text-decoration:none;
  color:#666;
  padding:5px 0 0;
}

h1 a:hover {
  text-decoration:underline;
}

p {
  font:0.8em/1.5em Arial, Helvetica, sans-serif;
}

h2 {
  font:bold 1.1em Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  margin:20px 0 0;
  color:#666;
  border-bottom:1px dotted #ccc;
  border-top:1px dotted #ccc;
  float:left;
  width:100%;
  padding:5px 0;
}

h2 span {
  font-size:0.7em;
  font-weight:normal;
  text-transform:none;
}

ul {
  width:100%;
  background:#ccc;
  list-style:none;
  float:left;
  padding:0 0 2.5% 0;
  margin-top:5px;
}

ul li {
  width:30%;
  float:left;
  margin:2.5% 0 0 2.5%;
  position:relative;
  cursor:pointer;
}

ul li img {
  max-width:100%;
  float:left;
  border:2px solid #eee;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/*----------------------------------------
  Gallery One
-----------------------------------------*/
.gal-1 li {
  -moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  -ms-transition:all 1s ease;
  -o-transition:all 1s ease;
  transition:all 1s ease;
}

@-webkit-keyframes hue { 
  100% { -webkit-filter:hue-rotate(360deg); }  
}

.gal-1 li:hover {
  z-index:2;
  -moz-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  -webkit-animation:hue 1s linear infinite;
}

/*----------------------------------------
  Gallery Two
-----------------------------------------*/
.gal-2 li {
  -moz-transition:all 0.6s ease;
  -webkit-transition:all 0.6s ease;
  -ms-transition:all 0.6s ease;
  -o-transition:all 0.6s ease;
  transition:all 0.6s ease;
  -webkit-filter:grayscale(1) blur(2px);
}

.gal-2 li:hover {
  z-index:2;
  -webkit-transform:scale(1.3);
  -moz-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  -webkit-filter:grayscale(0) blur(0);
}

/*----------------------------------------
  Gallery Three
-----------------------------------------*/
.gal-3 li {
  -moz-transition:all 0.6s ease;
  -webkit-transition:all 0.6s ease;
  -ms-transition:all 0.6s ease;
  -o-transition:all 0.6s ease;
  transition:all 0.6s ease;
  -webkit-filter:sepia(1) brightness(0.7) opacity(0.6);
}

.gal-3 li:hover {
  z-index:2;
  -moz-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  -webkit-filter:sepia(0) brightness(1) opacity(1);
}

/*----------------------------------------
  Gallery Four
-----------------------------------------*/
.gal-4 li {
  -moz-transition:all 0.6s ease;
  -webkit-transition:all 0.6s ease;
  -ms-transition:all 0.6s ease;
  -o-transition:all 0.6s ease;
  transition:all 0.6s ease;
  -webkit-filter:grayscale(1) brightness(0.4);
}

.gal-4 li:hover {
  z-index:2;
  -moz-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  box-shadow:0 0 12px rgba(0, 0, 0, 0.6);
  -webkit-filter:grayscale(0) brightness(1);
}