Effects

image filters library
HiperCSS framework
pages styles skins objects
effects icons anime get

Table of content

Image filters

Awesome image effects. Works only on webkit browsers: Safari and Chrome

http://hipertextos.github.io/src/css/effecss.css

Basic filters

.[filter]

Description
original
blur
brightness
brightless
contrast
grayscale
huerotate
invert
reflect
saturate
antisaturate
sepia
Markup
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="original">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="blur">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="brightness">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="brightless">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="contrast">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="grayscale">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="huerotate">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="invert">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="reflect">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="saturate">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="antisaturate">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="sepia">
http://hipertextos.github.io/src/css/effecss.css

On hover filters

.[filter]-onhover

Description
original
blur-onhover
brightness-onhover
brightless-onhover
contrast-onhover
grayscale-onhover
huerotate-onhover
invert-onhover
reflect-onhover
saturate-onhover
antisaturate-onhover
sepia-onhover
Markup
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="original">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="blur-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="brightness-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="brightless-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="contrast-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="grayscale-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="huerotate-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="invert-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="reflect-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="saturate-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="antisaturate-onhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="sepia-onhover">
http://hipertextos.github.io/src/css/effecss.css

When leave hover filters

.[filter]-nonhover

Description
original
blur-nonhover
brightness-nonhover
brightless-nonhover
contrast-nonhover
grayscale-nonhover
huerotate-nonhover
invert-nonhover
reflect-nonhover
saturate-nonhover
antisaturate-nonhover
sepia-nonhover
Markup
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="original">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="blur-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="brightness-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="brightless-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="contrast-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="grayscale-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="huerotate-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="invert-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="reflect-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="saturate-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="antisaturate-nonhover">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="sepia-nonhover">
http://hipertextos.github.io/src/css/effecss.css

Apply filter on click

.[filter]-able

Description
original
blur-able
brightness-able
brightless-able
contrast-able
grayscale-able
huerotate-able
invert-able
reflect-able
saturate-able
antisaturate-able
sepia-able
Markup
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="original">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="blur-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="brightness-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="brightless-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="contrast-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="grayscale-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="huerotate-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="invert-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="reflect-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="saturate-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="antisaturate-able">
<img src="http://hipertextos.github.io/src/img/picture.jpg" class="sepia-able">
HiperCSS framework
pages styles skins objects
effects icons anime get