The CSS in this article is pre-NextGEN Gallery 2.0.  If you are using the latest version of NextGEN Gallery then the CSS might be slightly different than what's in this example.  Also, custom CSS will not work for NextGEN Pro iframe based galleries.

Have you been wanting to spruce up your gallery thumbnails a bit? Below is a snippet of CSS that you can customize.  The purpose of this small CSS snippet is to convert your NextGEN Gallery thumbnails to monochrome when your mouse hovers over them. (as you see in the gallery below)

Here is the snippet of CSS that will handle this task. It is important to note that this CSS script will work flawlessly in Google Chrome and will not work in all browsers.

In the demo, the hover converts 100% to monochrome, but you can desaturate the thumbnails as per your liking.

Thanks and enjoy,


As a reminder, to see the gallery, you must be viewing this in the browser and not through email or in RSS software. The post must be viewed from its own URL and not from the main blog page. Also If you are not familiar with CSS and/or do not feel comfortable making changes like this to your website, please do not attempt it.

This Post Has 2 Comments

  1. I’m thinking to buy this Your plugin for personal use,
    Is in possible to have the contrary of this task,
    I mean to have always b/w thumbnails till a mouse over makes them colorfull,

Leave a Reply

Close Menu