CSS3 Image Filters

I'm a big fan of some of the experimental CSS properties that the browsers vendors are developing. In previous tutorials I have looked at some of the new features which I think are really useful.

• CSS Image Reflection With Webkit
• How To Add Text Gradients With CSS
• Changing Appearance Of Element With CSS
• Use CSS To Add Stroke Around Text
• Style Text Like Passwords With CSS
• Use CSS To Add Stroke Around Text
• Creating Different CSS3 Box Shadows Effects

In this tutorial we are going to look at a great new features called CSS filters. This is a new feature that can be used on both HTML elements and images, but I think it's best used on images and can create nice effects on image galleries.

Using just CSS you are able to create all these effects on images.

• Greyscale
• Blur
• Saturate
• Sepia
• Hue Rotate
• Invert
• Brightness
• Contrast
• Opacity

How To Use Filters

To use a filter in CSS it's as easy as using any other CSS property.

img
{
     filter: type(value);
}

Like most of new features in CSS3 you need to use browser prefixes.

img
{
     filter: type(value);
     -webkit-filter: type(value);
     -moz-filter: type(value);
     -ms-filter: type(value);
     -o-filter: type(value);
}

Browser Support

Currently the only browser that supports this is the wekbit browser so Chrome and Safari.

CSS Filters has been supported in Chrome since version 21 and has been in Safari since version 6.

It is currently unknown if IE10 or Firefox version 17 will support these properties but for now the best browser to see these features in is webkit.

Demo

In the demo we are going to create will show how to use all the filters on images see how the effect changes the images on the screen.

View the demo to see what we are going to create.

Demo

CSS Greyscale

Greyscale property will convert the colour in your images to a shade of grey.

The value of the property can be either decimal or percentage. 100% or 1.0 will make the image full greyscaled, 0% or 0 will add no effect of greyscale to the image.

Here is the HTML we are going to use.

<section class="grayscale">
<h2>CSS Greyscale</h2>
	<img height="200" src="images/water.jpg" />
</section>

For the CSS we are going to attach the properties to the images inside the div. First we are going to start off setting the values to full greyscale, then on the hover event we are removing all greyscale on the images.

.grayscale img
{
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}
.grayscale img:hover
{
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
	-ms-filter: grayscale(0);
}

CSS Blur

The blur effect will take your image and blur all of it, the amount of blurred is decided by the value of the property..

Blur is measured in pixels, so the more pixels you place the more blurred the image will be.

<section class="blur">
<h2>CSS Blur</h2>
	<img height="200" src="images/water.jpg" />
</section>

The CSS is attached to the image elements we are first starting off setting the blur to be 5px, we have added a hover event to set the blur effect back to 0.

.blur img
{
	filter: blur(5px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
}
.blur img:hover
{
	filter: blur(0);
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	-o-filter: blur(0);
	-ms-filter: blur(0);
}

CSS Saturate

The saturate effect adds colour saturating to the colours in your images.

The value used in saturate can be either decimal or percentage, the normal saturation value on your images will be 100%. To add more saturation to your image apply a percentage higher than 100%.

<section class="saturate">
<h2>CSS Saturate</h2>
	<img height="200" src="images/water.jpg" />
</section>

This is the CSS for the saturation demo, we are using a value of 500% and on the hover event we are resetting the image back to normal with a value of 100%.

.saturate img
{
	filter: saturate(500%);
	-webkit-filter: saturate(500%);
	-moz-filter: saturate(500%);
	-o-filter: saturate(500%);
	-ms-filter: saturate(500%);
}
.saturate img:hover
{
	filter: saturate(100%);
	-webkit-filter: saturate(100%);
	-moz-filter: saturate(100%);
	-o-filter: saturate(100%);
	-ms-filter: saturate(100%);
}

CSS Sepia

This will add a sepia tint to your images, which makes your image look like older photographs.

<section class="sepia">
<h2>CSS Sepia</h2>
	<img height="200" src="images/water.jpg" />
</section>

The value of the sepia property allows for both decimal and percentage values. 100% or 1.0 is full sepia effect and 0% or 0 will return the image back to normal.

.sepia img
{
	filter: sepia(1);
	-webkit-filter: sepia(1);
	-moz-filter: sepia(1);
	-o-filter: sepia(1);
	-ms-filter: sepia(1);
}
.sepia img:hover
{
	filter: sepia(0);
	-webkit-filter: sepia(0);
	-moz-filter: sepia(0);
	-o-filter: sepia(0);
	-ms-filter: sepia(0);
}

CSS Hue Rotate

The Hue rotate property will change the colour around to be completely different depending of the degree value you provide it.

The best way to think of this is like a colour spectrum wheel, the colour that it's starting at will will take the degree value of the hue rotate and use the new colour instead.

<section class="hue-rotate">
<h2>CSS Hue Rotate</h2>
	<img height="200" src="images/water.jpg" />
</section>

The value of this will take a value of degrees, the normal is 0 degrees. If you set the value to 360 degrees the spectrum goes full circle and will be exactly the same.

.hue-rotate img
{
	filter: hue-rotate(180deg);
	-webkit-filter: hue-rotate(180deg);
	-moz-filter: hue-rotate(180deg);
	-o-filter: hue-rotate(180deg);
	-ms-filter: hue-rotate(180deg);
}
.hue-rotate img:hover
{
	filter: hue-rotate(0);
	-webkit-filter: hue-rotate(0);
	-moz-filter: hue-rotate(0);
	-o-filter: hue-rotate(0);
	-ms-filter: hue-rotate(0);
}

CSS Invert

The invert effect will apply the same look as negatives on images back in the days when we used films in cameras.

The value of 100% will set this to full inverted effect.

<section class="invert">
<h2>CSS Invert</h2>
	<img height="200" src="images/water.jpg" />
</section>

The value of this property can either be a decimal or percentage, with 100% or 1 being full invert and 0% or 0 being the normal image.

.invert img
{
	filter: invert(1);
	-webkit-filter: invert(1);
	-moz-filter: invert(1);
	-o-filter: invert(1);
	-ms-filter: invert(1);
}
.invert img:hover
{
	filter: invert(0);
	-webkit-filter: invert(0);
	-moz-filter: invert(0);
	-o-filter: invert(0);
	-ms-filter: invert(0);
}

CSS Brightness

The brightness property will just change the brightness applied to the image, the normal image will start at 0%. To increase the brightness of the image you need to go higher than 0% so change it to 50% to see the brightness change.

<section class="brightness">
<h2>CSS Brightness</h2>
	<img height="200" src="images/water.jpg" />
</section>

The value of this can be decimal or percentage 100% or 1 will be full brightness, the 0% or 0 will be the normal image.

.brightness img
{
	filter: brightness(50%);
	-webkit-filter: brightness(50%);
	-moz-filter: brightness(50%);
	-o-filter: brightness(50%);
	-ms-filter: brightness(50%);
}
.brightness img:hover
{
	filter: brightness(100%);
	-webkit-filter: brightness(100%);
	-moz-filter: brightness(100%);
	-o-filter: brightness(100%);
	-ms-filter: brightness(100%);
}

CSS Contrast

The contrast value will change the difference between the lightest and darkest part of the image.

<section class="contrast">
<h2>CSS Contrast</h2>
	<img height="200" src="images/water.jpg" />
</section>

The value of this can be either decimal or percentage the normal image will have a contrast of 1. To make it darker use a value less than 1, to make it brighter you change the value more than 1.

.contrast img
{
	filter: contrast(0.3);
	-webkit-filter: contrast(0.3);
	-moz-filter: contrast(0.3);
	-o-filter: contrast(0.3);
	-ms-filter: contrast(0.3);
}
.contrast img:hover
{
	filter: contrast(1);
	-webkit-filter: contrast(1);
	-moz-filter: contrast(1);
	-o-filter: contrast(1);
	-ms-filter: contrast(1);
}

CSS Opacity

The opacity setting will change the transparency of the image. Changing the opacity of the image will make the image more transparent.

<section class="opacity">
<h2>CSS Opacity</h2>
	<img height="200" src="images/water.jpg" />
</section>

The normal opacity setting will be set to 1, if you want to me this transparent then you can set this value to less than 1.

.opacity img
{
	opacity:0.3;
}
.opacity img:hover
{
	opacity:1;
}

Adding Extra Animation On Hover Event

In the demos we are changing the effects on the hover event of the images, so it will be good to add some animation to the images. For this we are using the transition property so it will change the image from the effect back to normal.

On the hover event of each of the images we are making them pop out by increasing the scale of each of the images on the hover event.

img{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
img:hover{
	-webkit-transform: scale(1.1);
  	-moz-transform: scale(1.1);
  	-o-transform: scale(1.1);
  	transform: scale(1.1);
}

To see all of the above effects together view the demo.

Demo