Quantcast
Channel: Design Snack Blog
Viewing all articles
Browse latest Browse all 10

How to Use CSS Image Hover Effects

0
0

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!


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images