Using CSS3 filters on hover

index.html

<div class="container" ng-app="myApp" ng-controller="Example">
	<div class="jumbotron">
		<div class="container">
			<h2>Using CSS3 filters on hover</h2>
			<p>I am using <code>CSS3</code> like  <code>filter: grayscale(100%)</code>. You may want to check out <a href="http://css-tricks.com/almanac/properties/f/filter/">CSS Almanac: filter</a> <br /><code>Update 2014/12/17:</code> 73.31% of used browsers support <code>css filter</code>
			</p>
		</div>
	</div>
	<div class="container main">
		<div class="row">
			<div class="col-md-3">
				<h2>Grayscale</h2>
			</div>
			<div class="grey col-md-3"></div>
			<img src="http://lorempixel.com/200/200/sports" class="grey col-md-3" />
			<img src="http://lorempixel.com/200/200/food" class="grey col-md-3" />
		</div>
		<div class="row">
			<div class="col-md-3">
				<h2>Blur</h2>
			</div>
			<div class="blur col-md-3"></div>
			<img src="http://lorempixel.com/200/200/sports" class="blur col-md-3" />
			<img src="http://lorempixel.com/200/200/food" class="blur col-md-3" />
		</div>
		<div class="row">
			<div class="col-md-3">
				<h2>Contrast</h2>
			</div>
			<div class="contrast col-md-3"></div>
			<img src="http://lorempixel.com/200/200/sports" class="contrast col-md-3" />
			<img src="http://lorempixel.com/200/200/food" class="contrast col-md-3" />
		</div>
	</div>

</div>

style.css

.grey, .blur, .contrast {
  margin: 2em;
  padding: 0;
  width: 200px;
  height: 200px;
  background-color: orange;
}
.main div:hover, .main img:hover {
	transition: all 200ms ease-in-out;
}
.grey {
	filter: grayscale(100%);
}
.grey:hover {
	filter: grayscale(0%);
}
.blur {
	filter: blur(5px);
}
.blur:hover {
	filter: blur(0);
}
.contrast {
background: 
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);	
background-size: 100px 100px;
background-color: #EC173A;
	filter: contrast(600%);
}
.contrast:hover {
	filter: contrast(100%);
}
.jumbotron {
  padding: 0;
}

Using-CSS3-filters-on-hover.markdown

Using CSS3 filters on hover

I am using CSS3 like filter: grayscale(100%) Update 2014/12/17: 73.31% of used browsers support css filter

A Pen by Sten Hougaard on CodePen.

License.