I had the idea today of making the top of the website, the header images, transition more fluidly. I don't like how they fade in so abruptly, even though that's a good solution for them to just pop in. I used to use jQuery's $().animate({ }); to animate things like opacity and whatnot. In order to animate CSS Filters to create a more robust animation you have to use the CSS Transition property. If the starting point of your image's CSS looks like this...

• <img></img>
• <style>
• img{
• filter: grayscale(1); /* image is turned to grey on load */
• opacity: '0'; /* image has zero opacity, meaning it's invisible */
• transition: '2s'; /* any change in CSS will require a 2 second transition */
• }
• </style>

...you will be able to transition that element to full opacity and color by changing the CSS by adding this...

• <script>
• $('img').css({
• 'filter':'none', //-> remove the greyscale filter, producing color
• 'opacity':'1' //-> change opacity to 1, meaning fully visible
• });
• </script>

The element will fade in, the color will fill, all within two seconds, which is what the transition property stated when you originally set the CSS of the image. I found that pretty interesting.