CodePen Embed - CSS3 Filters with Transitions (2012)

<div>
    
    <h1>Using 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">Grayscale</h2>
      <ul class="gal-1">
          
          <li><img src="http://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
          
      </ul>
      
      <h2 id="gal-two">Saturate</h2>
      <ul class="gal-2">
          
          <li><img src="http://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
          
      </ul>
      
      <h2 id="gal-three">Sepia</h2>
      <ul class="gal-3">
          
          <li><img src="http://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
          
      </ul>
      
      <h2 id="gal-four">Hue Rotate</span></h2>
      <ul class="gal-4">
          
          <li><img src="http://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
          
      </ul>
      
      <h2 id="gal-five">Invert</h2>
      <ul class="gal-5">
          
          <li><img src="http://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
          
      </ul>
      
      <h2 id="gal-six">Brightness</h2>
      <ul class="gal-6">
          
          <li><img src="http://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
          
      </ul>
      
      <h2 id="gal-seven">Contrast</h2>
      <ul class="gal-7">
          
          <li><img src="http://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/6.jpg" alt=""></li>
          
      </ul>
      
      <h2 id="gal-eight">Blur</h2>
      <ul class="gal-8">
          
          <li><img src="http://ste.digital/demos/css3-filters/1.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/2.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/3.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/4.jpg" alt=""></li>
          
          <li><img src="http://ste.digital/demos/css3-filters/5.jpg" alt=""></li>
          
          <li><img src="http://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 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);
}

.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-filter:grayscale(0);
}

/*----------------------------------------
  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:saturate(4);
}

.gal-2 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:saturate(1);
}

/*----------------------------------------
  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);
}

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

/*----------------------------------------
  Gallery Four
-----------------------------------------*/
.gal-4 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;
}

.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:hue-rotate(360deg);
}

/*----------------------------------------
  Gallery Five
-----------------------------------------*/
.gal-5 li {
  -moz-transition:all 0.6s ease;
  -webkit-transition:all 0.6s ease;
  -o-transition:all 0.6s ease;
  -ms-transition:all 0.6s ease;
  transition:all 0.6s ease;
  -webkit-filter:invert(1);
}

.gal-5 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:invert(0);
}

/*----------------------------------------
  Gallery Six
-----------------------------------------*/
.gal-6 li {
  -moz-transition:all 0.6s ease;
  -webkit-transition:all 0.6s ease;
  -o-transition:all 0.6s ease;
  -ms-transition:all 0.6s ease;
  transition:all 0.6s ease;
  -webkit-filter:brightness(0.5);
}

.gal-6 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:brightness(1);
}

/*----------------------------------------
  Gallery Seven
-----------------------------------------*/
.gal-7 li {
  -moz-transition:all 0.6s ease;
  -webkit-transition:all 0.6s ease;
  -o-transition:all 0.6s ease;
  -ms-transition:all 0.6s ease;
  transition:all 0.6s ease;
  -webkit-filter:contrast(0.3);
}

.gal-7 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:contrast(1);
}

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

.gal-8 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:blur(0);
}

This Pen is owned by Stephen Greig on CodePen.

See more by @stephengreig on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.