Hilfe zu CSS Code

Dafür setzt man den Transition Code ein:

.box {




     -webkit-transition: 200ms linear 0s;
     -moz-transition: 200ms linear 0s;
     -o-transition: 200ms linear 0s;
     transition: 200ms linear 0s;




}




.box:hover {




    -webkit-transition: 200ms linear 0s;
     -moz-transition: 200ms linear 0s;
     -o-transition: 200ms linear 0s;
    transition: 200ms linear 0s;




}

Die Fadezeit kann man beliebig festlegen, weiterführender Link hier:
Klick mich hart

Mit freundlichen Gruß
Gino Zantarelli

Der Code oben ist einerseits unvollständig, andererseits überladen, @Gino Zantarelli.
Wenn du beim :hover denselben Effekt willst, kannst du ihn einfach weglassen. Außerdem fehlt bei dir der CSS-Befehl, der überhaupt diese Animation erhalten soll.

Außerdem wäre die Nutzung des Mixins angebracht:

.box {
	.transition(~"all", .2s);
}

(linear) wird standardmäßig im Mixin gesetzt.

.. stimmt, der CSS-Code ist doppelt enthalten-natürlich kommt dieser nur in den ersten Codeblock. Ein Befehl für die Funktion habe ich absichtlich nicht integriert, da der User sich seinen Code selber erstellt-es geht lediglich um die Funktion ansich.

Den von Black Rider optimierten Code kenne ich selber nicht, dafür bin ich ja auch schon zu alt.....

Mit freundlichen Gruß
Gino Zantarelli

hmmm... hast du mal versucht den CSS-Code zu erzwingen mit einem !important ?

Das bezieht sich auf die Bilder im Template Page:

#tplPage figure > a.framed > img {




filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */




-webkit-filter: grayscale(100%);




-moz-filter: grayscale(100%);




-ms-filter: grayscale(100%);




filter: grayscale(100%);




filter: gray; /* IE 6-9 */




}

Und der Hovereffekt:

#tplPage figure > a.framed > img:hover {




-webkit-filter: none !important;




-moz-filter: none !important;




-ms-filter: none !important;




filter: none !important;




}

Mit freundlichen Gruß
Gino Zantarelli

Jetzt geht in allen Browsern der Effekt nicht mehr, ich sehe im Codeinspektor auch nicht den von mir übermittelten Code-hast Du diesen evtl. vergessen oder gelöscht ?

Übrigens: verlasse Dich nicht auf Anzeigen in anderen Browsern, solange der Cache von diesen noch gefüllt ist mit alten Daten stimmen die Darstellungen auch nicht

Mit freundlichen Gruß
Gino Zantarelli