Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 6, 2014 at 9:31 pm #220679
    davidtaylorwebmedia

    is it possible to have partner logos slider in greyscale which go to colour on hover…I saw it on another site which uses enfold…but can’t see how to do it

    thanks

    February 6, 2014 at 9:38 pm #220682
    Yigit

    Hey davidtaylorwebmedia!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    #top .avia-logo-element-container img { filter: grayscale(100%);
    -webkit-filter: grayscale(100%); 
    filter: gray;
    -webkit-transition: all .6s ease;}

#top .avia-logo-element-container img:hover {    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none; }

    Best regards,
    Yigit

    July 8, 2014 at 12:14 am #288265
    miketica

    I have used the same css for my logos, it seems to work very nice in Chrome, but not at all in IE or Firefox. One detail that I have to add: I have a hybrid utrabook/tablet so I know for sure that IE in Windows 8 detects it as a mobile device, not a laptop.; not sure about Firefox;Chrome treats it as a laptop.

    July 8, 2014 at 12:23 pm #288447
    Yigit

    Hey!

    Please try following code

    .logo img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.logo img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}

    Cheers!
    Yigit

    July 24, 2014 at 4:44 pm #295460
    miketica
    This reply has been marked as private.
    July 24, 2014 at 4:58 pm #295474
    Dude

    Hi!

    Unfortunately some css attributes are not supported by all browsers and it requires some testing and different solutions (javascript, etc.) to use this effect for all browsers. The default version of Enfold does not support such an effect and thus we consider this as a customization which we can’t provide or help with for free. If you need a greyscale effect which works on all browsers/devices please hire a freelancer who can help you to implement the necessary code. I recommend a service like: http://studio.envato.com/ or http://kriesi.at/contact/customization

    Cheers!
    Peter

    July 28, 2014 at 4:35 am #296570
    miketica

    I will consider it. I’m sorry if I abused your free service. I hoped this would be beneficial for all of us; gray logos as a trust element seem to be the norm nowadays(as to provide the user with more reasons to trust without distracting attention from the page’s main goal/call to action).

    Regards,
    Silviu

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Partner logo slider – greyscale and colour on hover’ is closed to new replies.