Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #419676

    Hi guys!

    I have a partners element in which I added the logos of the partners in grey-scale, and I would like to see them in color if I hover on each one of them (see another image of the same logo but in full color when hovered). I can’t seem to find a way to do it, any ideas?

    Thanks! :)

    #420170

    Hey therqworld!

    It looks like you worked it out, correct?

    Regards,
    Rikard

    #420703

    Hi Rikard!

    Nop, I haven’t worked it out. Maybe you’re seeing the logos in the header (Canada Green Council, Bullfrog…) which I just added using an HTML widget. What I want to modify are the logos in the body, the partners (Samsung, Mitsubishi, etc) and have the exact same behavior as the ones on the header: make them full color on hover.

    Yep, I know how to achieve this, you can see it in the logos in the header, but the way your Partners element works doesn’t allow me to use the same solution and I couldn’t find a way around it. Hope you have an idea that will work!

    Thanks!
    Raquel

    • This reply was modified 9 years, 9 months ago by therqworld.
    #421427

    Hi!

    Try the solutions in these threads.

    https://kriesi.at/support/topic/partner-logos-in-greyscale-coloured-at-mouseover/
    https://kriesi.at/support/topic/partner-logo-slider-greyscale-and-colour-on-hover/

    You’ll need to upload the images in full color instead of greyscale.

    Best regards,
    Elliott

    • This reply was modified 9 years, 8 months ago by Elliott.
    #421482

    Hi!

    Thanks for the threads! They didn’t come up in my search.

    I used the code in the first one and it works great, except in IE. I also added a few more lines to modify the opacity:

    #top .avia-logo-element-container img {
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%); 
      filter: gray;
      -webkit-transition: all .5s ease; 
      opacity: 0.5;
      filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    
    #top .avia-logo-element-container img:hover {    
      filter: grayscale(0%);
      -webkit-filter: grayscale(0%);
      filter: none; 
      opacity: 1.0;
      filter: alpha(opacity=100); /* For IE8 and earlier */
    }

    The opacity works fine in IE but the greayscale doesn’t (Already tried just your code, with none of my lines, and it’s the same: greyscale won’t work in IE) If you have a solution for that please let me know, if not, oh well, it’s not biggie.

    Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Image hover in Partners element’ is closed to new replies.