CSS3 webkit filters for image hover effects

CSS hover effects on images are always a fun thing to experiment. CSS3 (webkit) Filters are a powerful tool that web authors can use to achieve interesting visual effects for their content. Using filters from CSS is done by using the ‘filter’ property applied to any visible element on your web page. CSS introduces a bunch of standard filter effects that make using them really easy. Most filters take some form of parameter to control how much filtering is done.

Let’s have a look at example comes with an HTML and CSS snippet that you can steal 😉 and a live demo so you can see it in action.

 

HTML

<div class="container">
<a href="#">
<img class="grayscale" src="http://atr2k.com/wp-content/uploads/2017/01/art.png"/>
<span class="text">Grayscale</span>
</a>
<a href="#">
<img class="brightness" src="http://atr2k.com/wp-content/uploads/2017/01/boats.png"/>
<span class="text">Brightness</span>
</a>
<a href="#">
<img class="blur" src="http://atr2k.com/wp-content/uploads/2017/01/birds.png"/>
<span class="text">Blur</span>
</a>
<a href="#">
<img class="saturate" src="http://atr2k.com/wp-content/uploads/2017/01/starss.png"/>
<span class="text">Saturate</span>
</a>
<a href="#">
<img class="huerotate" src="http://atr2k.com/wp-content/uploads/2017/01/fly.png"/>
<span class="text">Hue-rotate</span>
</a>
<a href="#">
<img class="contrast" src="http://atr2k.com/wp-content/uploads/2017/01/no.png"/>
<span class="text">Contrast</span>
</a>
<a href="#">
<img class="opacity" src="http://atr2k.com/wp-content/uploads/2017/01/shake.png"/>
<span class="text">Opacity</span>
</a>
<a href="#">
<img class="sepia" src="http://atr2k.com/wp-content/uploads/2017/01/puppy.png"/>
<span class="text">Sepia</span>
</a>
<a href="#">
<img class="invert" src="http://atr2k.com/wp-content/uploads/2017/01/monkey.png"/>
<span class="text">Invert</span>
</a>
</div>

CSS

/*CSS3 Hover Effects Styles*/
body {
font-family: Roboto;
background: #555;
}
.container {
width: 750px;
margin: 50px auto;
}
.container a {
display: flex;
flex-direction: row;
float: left;
margin: 10px;
position: relative;
box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.3);
}
.container a img {
display: flex;
-webkit-transition: all 0.5s;
}
.container a img:hover {
-webkit-filter: none;
}
.container a img.brightness:hover {
-webkit-filter: brightness(1);
}
.text {
font-size: 1em;
letter-spacing: 1px;
color: white;
position: absolute;
background: rgba(0, 0, 0, 0.3);
padding: 6px;
bottom: 0;
left: 0;
}
/* .................................................. CSS3 Filters */
.grayscale {-webkit-filter: grayscale(100%);}
.brightness {-webkit-filter: brightness(0.5);}
.blur {-webkit-filter: blur(2px);}
.saturate {-webkit-filter: saturate(4);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.contrast {-webkit-filter: contrast(150%);}
.opacity {-webkit-filter: opacity(50%);}
.sepia {-webkit-filter: sepia(100%);}
.invert {-webkit-filter: invert(100%);}

 

Check Live Demo and Try It Yourself!

The code above are all meant for you to experiment and use as you will in your own work, so be sure to bookmark this page and come back to it the next time you’re looking for an interesting CSS experiment.

Leave a Reply