Image hover in Partners element

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, 8 months ago by therqworld.

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!