1 reply [Last post]
GTh
GTh's picture
Offline
newbie
Last seen: 5 years 34 weeks ago
Timezone: GMT-5
Joined: 2015-02-20
Posts: 2
Points: 3

I would like to implement a function in Master Slider on my site:

Add grayscale effects to thumbnails (colour on hover – as in the example here: http://www.artch.ca/jig)

I try to use the code below. Alas it does not provide me the same smooth transition as in the example above. What has to be improved/changed/added to achieve the effect?

Any helpful suggestion will be truly appreciated.

/**
Modification grayscale
*/

.ms-thumb-frame.ms-thumb-frame-selected img {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
filter: grayscale(0);
}
img.ms-thumb {
filter: url("data:image/svg+xml;utf8,#grayscale");
/* Firefox 10+, Firefox on Android */
filter: gray;
-webkit-filter: grayscale(100%);
transition: 0.90s ease-in;
-webkit-transition: .5s ease-in-out;
-moz-transition: 0.90s ease-in-out;
-webkit-transition-delay: 2s;
}
img.ms-thumb:hover {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}

GTh
GTh's picture
Offline
newbie
Last seen: 5 years 34 weeks ago
Timezone: GMT-5
Joined: 2015-02-20
Posts: 2
Points: 3

<code>/** Modification

<code>/**
Modification grayscale
*/
 
.ms-thumb-frame.ms-thumb-frame-selected img {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
filter: grayscale(0);
}
img.ms-thumb {
filter: url("data:image/svg+xml;utf8,#grayscale");
/* Firefox 10+, Firefox on Android */
filter: gray;
-webkit-filter: grayscale(100%);
transition: 0.90s ease-in;
-webkit-transition: .5s ease-in-out;
-moz-transition: 0.90s ease-in-out;
-webkit-transition-delay: 2s;
}
img.ms-thumb:hover {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}