CSS-Filter

blur

CSS-Code:

.blur:hover {

-webkit-filter: blur(2px);

filter: blur(2px);

}

.blur {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}

brightness

CSS-Code:

.brightness:hover {

-webkit-filter: brightness(1.5);

filter: brightness(1.5);

}

.brightness {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}


contrast

CSS-Code:

.contrast:hover {

-webkit-filter: contrast(2);

filter: contrast(2);

}

.contrast {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}

grayscale

CSS-Code:

.grayscale:hover {

-webkit-filter: grayscale(1);

filter: grayscale(1);

}

.grayscale {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}


support
Dutch English French German

hue-rotate

CSS-Code:

.hue-rotate:hover {

-webkit-filter: hue-rotate(45deg);

filter: hue-rotate(45deg);

}

.hue-rotate {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}

invert

CSS-Code:

.invert:hover {

-webkit-filter: invert(1);

filter: invert(1);

}

.invert {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}


opacity

CSS-Code:

.opacity:hover {

-webkit-filter: opacity(.5);

filter: opacity(.5);

}

.opacity {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}

saturate

CSS-Code:

.saturate:hover {

-webkit-filter: saturate(2);

filter: saturate(2);

}

.saturate {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}


sepia

CSS-Code:

.sepia:hover {

-webkit-filter: sepia(1);

filter: sepia(1);

}

.sepia {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}

sepia-hue-rotate

CSS-Code:

.sepia-hue-rotate:hover {

-webkit-filter: sepia(1) hue-rotate(120deg);

filter: sepia(1) hue-rotate(120deg);

}

.sepia-hue-rotate {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}


sepia-hue-rotate-blur

CSS-Code:

.sepia-hue-rotate-blur:hover {

-webkit-filter: sepia(.9) hue-rotate(280deg) blur(2px);

filter: sepia(.9) hue-rotate(280deg) blur(2px);

}

.sepia-hue-rotate-blur {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}

brightness-contrast

CSS-Code:

.brightness-contrast:hover {

-webkit-filter: brightness(1.1) contrast(1.3);

filter: brightness(1.1) contrast(1.3);

}

.brightness-contrast {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}


grayscale-opacity

CSS-Code:

.grayscale-opacity:hover {

-webkit-filter: grayscale(1) opacity(.5);

filter: grayscale(1) opacity(.5);

}

.grayscale-opacity {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}

sepia-opacity

CSS-Code:

.sepia-opacity:hover {

-webkit-filter: sepia(1) opacity(.5);

filter: sepia(1) opacity(.5);

}

.sepia-opacity {

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}


Einbau

Den CSS-Code in mobile_script einfügen:

Doppelklick auf die entsprechende Seite > Attribute > unten auf Attribute und den Haken bei (alle anzeigen setzen) > Standart > mobile_script > code einfügen > ok > ok

 

Inhaltsbereich:

ZB. ein Bild per Textabsatz einbinden und anschließend auf (HTML-Quellcode umschalten). Den Abschnitt class="singleImage" durch class="grayscale" ersetzen.

 

Oder ein Bild per Widget Quelltext nach folgendem Schema einfügen:

<a href="https://www.zeta-producer.com/"><img class="grayscale" border="0" alt=""  src="http://www.deineseite.de/images/deinbild.jpg" /></a>