Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #315896

    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 5 years, 11 months ago by  melonmelon.
    #316227

    \Hi melonmelon!

    Unfortunately that isn’t something we can assist with. You could try stack exchange or somewhere like that but pure custom code is out of the scope of what we cover via support.

    Cheers!
    Devin

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Apply Sepia Effect to Images’ is closed to new replies.