Problem with Partner Logos in greyscale – coloured at mouseover - Support

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

Author

Posts
March 21, 2014 at 5:00 pm #241254
IHEA
Participant
I put in the CSS, and the logos are changing from greyscale to colour, but there is a little problem with the transition…

Sometimes the transition is smooth an soft, but then, some seconds later when mouseover the greyscale logo disappears and the coloured logo pops up with nothing like smooth fading…

what could be the problem?

http://www.habermann-gmbh.com/wordpress/?page_id=1195

Cheers, Dan
- This topic was modified 10 years, 9 months ago by IHEA. Reason: add the link
March 21, 2014 at 5:10 pm #241258
Yigit
Keymaster
Hi IHEA!

Please replace the code i posted with following one
```
#top .avia-logo-element-container img { filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%); 
    filter: gray;
    -webkit-transition: all .6s ease; }

#top .avia-logo-element-container img:hover {    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: none; }
```
It does work fine on my end on Chrome right now. Which browser are you using?

Regards,
Yigit
March 21, 2014 at 5:33 pm #241271
IHEA
Participant
I use chrome too… and even with the new code I have this disappear/popup behavior…

Oh… I try to have a look in wich situation it happens… and now i find out when everything is smooth… when I scroll down one time, so that the whole page is loaded and all the elements have done their job, then the mouseover is a smooth fading…

can we solve this?

Regards, Dan

I was wrong, it only happens when I see the logos without the progress element… when both elements are in sight, everything is fine, when I scroll up and the progress-element disappears I have the popup problem…

I hope you understand :D

Cheers, Dan
- This reply was modified 10 years, 9 months ago by IHEA. Reason: new information
March 21, 2014 at 5:59 pm #241284

Yigit
Keymaster

Hi!

I tried both ways but “popup problem” is just not happening on my end. I am using Chrome v33.0.1750.154 m on Win7. Which OS are you using?
Please also note that this is not a native theme feature and just a quick custom CSS code i threw and may or may not work cross browser.
And for your information, links to your slider images are broken on your page. You should remove them and re-upload in Media > Library

Regards,
Yigit

March 21, 2014 at 6:13 pm #241298

IHEA
Participant

Thx, I work with Win 8.1 and Chrome Version 33.0.1750.154 m

I gave it a try without the progress bars, and now everything is fine… I will use the logo slider without the bars on that page…

I know the thing with the slider images, but thx for the information!

Thank you for the CSS even if it is a quick one ;)

Maybe you can give me a custom css that the information speech bubbles open in the pictures and not above them.. ?!

Regards, Dan

March 22, 2014 at 5:30 am #241516
Ismael
Moderator
Hi!

That is possible but the tooltip will pop out over and over again. You can add something like this on Quick CSS or custom.css:
```
.avia-tooltip {
margin-top: 80px;
margin-left: 5px;
}
```
Cheers!
Ismael
Author

Posts

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

You must be logged in to reply to this topic.