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 fade your NextGEN Gallery thumbnails when your mouse hovers over them. (as you see in the gallery below)
Here is the snippet of CSS that will handle this task.
In the demo, the hover fades to 40%, but you can change the fade as per your liking. There is also a delay in the fade of .5s, which can be slowed more or made faster. Last, but not least, you can reverse the effect and swap out the :hover portion. This will make a faded thumbnail become 100% upon hover.
Thanks and enjoy,
Scott
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.
Ivan Chen
31 Jul 2017Hi, I am a beginner wordpress user with not much coding experience. Is there any way to customize NextGEN’s thumbnails to display another image upon hover with a crossfade transition?
Scott Wyden Kivowitz
31 Jul 2017Not at the moment