Enhance your website with cool effects

With newer advancements in HTML, a language used to display the internet, we can now made cool grayscale-to-color image rollovers using HTML and CSS. We did this for headshot images in a website we built for a client. The task was to make a nice transition from a black-and-white photo to the same image in full color upon hovering over. In the past, to achieve the same effect one would have to use two images (or more) and apply each effect individually, thus adding heaviness that overall slows a website down. A slow loading website affects its rank in Google and other search results on the internet. Now this entire effect can be achieved by using one image and a grayscale filter, like a filter you’d see in Photoshop, but done with HTML and CSS code. Hover your mouse over (or point on if viewing from a mobile device) the images to see the image transition to color!

We used CSS to tell the images in this post to use a grayscale filter as an initial state. Then CSS was used to tell the images to smoothly ease out, then in, to transition to the unfiltered original color version of the image. The great thing about using HTML5 and CSS for image filter effects is that they can be viewed across all modern browsers. These types of effects make websites more alive and dynamic looking, without bogging down your site with heavy code and memory-intensive images. Another great thing is that these effects are easily implemented into websites made with WordPress.