How to Use CSS Image Hover Effects

Posted Friday, November 23rd, 2012 in Uncategorized
How to Use CSS Image Hover Effects

Images are a very important part of any website. As a matter of fact, an infographic from MDG advertising shows that articles with relevant images receive 94% more total pageviews than articles without images, on average.

But, as web designers and developers, we can do much better than simply adding graphics to our websites. We have the ability to use code to make those images pop and become interactive!

So today, let’s go over how to add some hover effects to images using CSS.

Setting The Project Up

I went ahead and coded up a basic project with an image that has 7 different image hover effects. The filters are applied by default to the image and are removed upon hover creating a nice effect.

Below is the code for the project I created.

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style>
		img {
			-webkit-transition: all 1s ease;
			-moz-transition: all 1s ease;
			-o-transition: all 1s ease;
			-ms-transition: all 1s ease;
			transition: all 1s ease;
		}

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

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

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

		.contrast{
			filter: contrast(300%);
			-webkit-filter: contrast(300%);
			-moz-filter: contrast(300%);
			-o-filter: contrast(300%);
			-ms-filter: contrast(300%);
		}

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

		.invert {
			filter: invert(100%);
			-webkit-filter: invert(100%);
			-moz-filter: invert(100%);
			-o-filter: invert(100%);
			-ms-filter: invert(100%);
		}

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

		.grayscale {
			filter: grayscale(100%);
			-webkit-filter: grayscale(100%);
			-moz-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
		}

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

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

	</style>
</head>

<body>

	<section>
		<img   class="blur" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

		<img   class="brightness" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

		<img   class="saturation" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

		<img   class="contrast" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

		<img   class="invert" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

		<img   class="grayscale" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

		<img   class="sepia" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">
	</section>

</body>

</html>

And here is the result of that code.


 

What Do You Think?

This post is an introduction into using CSS filters and transitions to create fairly simple image hover effects. Now, I have two questions for you.

What do you think of the content in this post? How do you plan on using the technique?

Leave a comment below and let us know!

4 Responses to “How to Use CSS Image Hover Effects”

  1. Fred says:

    No effects here (Firefox 17.0.1)

  2. Rahul says:

    when i hover the mouse, the effect takes place immidiately instead of happening slowly. please help me

  3. Valerie says:

    Ditto, Firefox 19 on a Mac… all your images look the same.

  4. Snake says:

    This is very useful for me…

Leave a Reply