Monochrome Thumbnail menu
Posted: Fri Aug 09, 2019 6:24 pm
Hi,
After seeing a forum post I made this modified Silhouette Thumbnail Menu.
It shows monochrome thumbnails but changes to colour on mouseover.
The key to this was to make a copy of the node image.
Then in the copied node image add a greyscale filter to the CSS Styles.
The cool thing about this is the greyscale filter is in the node image element, so you use the same images for the colour thumbnails and the greyscale thumbnails eliminating the need for having both greyscale and colour images.
For more filters see this website: https://www.w3schools.com/cssref/css3_pr_filter.asp
Regards,
Hopki
After seeing a forum post I made this modified Silhouette Thumbnail Menu.
It shows monochrome thumbnails but changes to colour on mouseover.
The key to this was to make a copy of the node image.
Then in the copied node image add a greyscale filter to the CSS Styles.
Code: Select all
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
For more filters see this website: https://www.w3schools.com/cssref/css3_pr_filter.asp
Regards,
Hopki