Cool image effects using filters with HTML and CSS | Fusion Printing & Web Design CT
< back

Cool image effects using filters with HTML and CSS

With new advancements in HTML, a language used to display the internet, I was able to make these cool grayscale-to-color image rollovers using HTML5 and CSS3. I was asked to do this for a page of headshot images in a website Fusion 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!

fusion-image-rollover-effect2fusion-image-rollover-effect

fusion-image-rollover-effect4

fusion-image-rollover-effect5

I used CSS to tell the images in this post to use a grayscale filter as an initial state. I then used CSS 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.

Image Rollover B/W to color effectfusion-image-rollover-effect7fusion-image-rollover-effect8

fusion-logo-icon

Stay tuned for more cool image effects using HTML and CSS!
Video Tutorial: Edit your own website using WordPress
Does your website need to be mobilized?