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;
}
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>