Filtering - is simple hover effects created with CSS filters. CSS3 filters are currently supported in WebKit nightlies. Hence, the walkthrough only uses the -webkit prefix for applying the filter effects.
HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
image
README.md
_config.yml
index1.html
index2.html
index3.html
index4.html
index5.html
index6.html
index7.html
index8.html
index9.html

README.md

Filtering - CSS3 Filter Effects

Filtering - is simple hover effects created with CSS filters. CSS3 filters are currently supported in WebKit nightlies. Hence, the walkthrough only uses the -webkit prefix for applying the filter effects.


Where is one of:

  • blur()
  • grayscale()
  • brightness()
  • saturate()
  • contrast()
  • invert()
  • sepia()
  • hue-rotate()
  • opacity()

1. CSS3 Filter Blur Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .blur img { -webkit-filter: blur(2px); } ```

2. CSS3 Filter Grayscale Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .grayscale img { -webkit-filter: grayscale(100%); } ```

3.CSS3 Filter Brightness Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .brightness img { -webkit-filter: brightness(55%); } ```

4.CSS3 Filter Saturate Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .saturate img { -webkit-filter: saturate(10); } ```

5. CSS3 Filter Contrast Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .contrast img { -webkit-filter: contrast(160%); } ```

6.CSS3 Filter Invert Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .invert img { -webkit-filter: invert(65%); } ```

7.CSS3 Filter Sepia Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .sepia img { -webkit-filter: sepia(100%); } ```

8.CSS3 Filter Huerotate Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .huerotate img { -webkit-filter: hue-rotate(180deg); } ```

9.CSS3 Filter Opacity Effects

Live Demo & Code Editor

HTML MARKUP

``` ```

CSS Filter Functions

``` .opacity img { -webkit-filter: opacity(50%); } ```

Browser Support

Chrome Safari Firefox Opera IE Android iOS
31+ (-webkit-) 7+ (-webkit-) 35+ 18+ (-webkit-) nope 4.4+ (-webkit-) 6+ (-webkit-)