CSS kódnak különböző átmenetek
2013.05.29. 17:16
Fekete-fehér átmenet demója:

Ennek a kódja:
<style type="text/css">
a img {
filter: alpha(opacity=90);
opacity: 0.7;
-webkit-filter: grayscale(100%) brightness(100%) contrast(100%);
-webkit-transition: all .38s;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
;}
a img:hover {
filter: alpha(opacity=100);
opacity: 1;
-webkit-filter: grayscale(0);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
</style>
Egyébként különböző szín effektben is lehet használni, csak a "-webkit-filter: grayscale(100%) brightness(100%)" részt kell átírni valamelyikre ezek közül (képeken látod, hogy milyen effektűek előtte-utána) a képek alatt van a kódjuk:

Kódja: -webkit-filter: hue-rotate(180deg);
-webkit-filter: invert(100%);

-webkit-filter: saturate(250%);

-webkit-filter: sepia(100%);
|