Apply Sepia Effect to Images

I really love ENFOLD! You´re doing a great job.
I have a new project in the pipeline where i want (allmost) all images displayed in sepia automatically.
I found some CSS code to do this and added it in QuickCSS. I also added exceptions for the logo and the slider because I dont want them to be affected by the effect. So generally it works quite good on Firefox but not on Safari 6 and below, nor on Iphone and Android.
I have no Idea how to fix this Problem. Any Idea how to get this reliable for all browsers??

and here is the code I used:

/* automatic SEPIA for all images*/
img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");
    -webkit-filter: sepia(1);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
}
img:hover {
    filter: none;
    -webkit-filter: sepia(0);
    -moz-filter: sepia(0);
    -ms-filter: sepia(0);
    -o-filter: sepia(0);
    filter: sepia(0);
}

/* NO SEPIA for Logo */
.logo img {
 filter: none;
    -webkit-filter: sepia(0);
    -moz-filter: sepia(0);
    -ms-filter: sepia(0);
    -o-filter: sepia(0);
    filter: sepia(0);
}

/* NO SEPIA for Slider */
.ls-slide .ls-bg {
 filter: none;
    -webkit-filter: sepia(0);
    -moz-filter: sepia(0);
    -ms-filter: sepia(0);
    -o-filter: sepia(0);
    filter: sepia(0);
}

P.S.: I´m not a CSS-Pro

• This topic was modified 10 years, 3 months ago by melonmelon.