-
Posts
-
I would like my logo element images to be greyscale until the mouse hovers over them. I have done this with the code below.
This works ok but would like the effect to have a fade transition – is there an easy way to do this?
Many Thanks
————————————————-
.avia-logo-element-container.greyed .slide-entry img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
}.avia-logo-element-container.greyed img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}Hey M1000000,
Could you provide us with a link to the site in question so that we can take a closer look please?
Regards,
RikardHi Rikard – localhost I’m afraid (and will be for a while yet).
Basically just using standard Partner/Logo element on a page. Default behavior on roll over is nothing – adding the code above adds a grayscale filter which is removed on mouseover.
Problem is the transition is immediate and I would like a subtle fade out of greyscale on hover (and in again when not).
HTML for the image elements (again bog standard) below:
<div class="slide-entry flex_column no_margin post-entry slide-entry-overview slide-loop-2 slide-parity-even av_one_eighth real-thumbnail"><img width="355" height="355" alt="clients-bit" class="attachment-no scaling" src="http://localhost/inhouse/2016/wp-content/uploads/2015/11/clients-bit.jpg" itemprop="contentURL"></div>Hi!
I am sorry but that does not help us a lot, to make sure we can help, if we can not check live and try to re-create what you want.
We will be more than happy to assist on that part, if you could upload on a staging web site, so we can check and workRegards,
Basilis
- You must be logged in to reply to this topic.