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.
Hi,
Not able to see the CSS snipet. Am i missing anything ?
Also how easy is it to do otherway round ie all 50% grayed out and when you hover it should become 100% clear ?
Thanks
Shiv
If you do not have java turned on you might not see the snippet. It’s show on 3 browsers for us. Reversing it is very simple, you just change where the :hover is in the snippet.
This works better:
.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #FFFFFF !important;
display:block;
margin:10px 0px 10px 10px !important;
padding:4px;
position:relative;
-webkit-box-shadow: 0px 0px 3px 3px #f0f0f0;
box-shadow: 0px 0px 5px 5px #f0f0f0;
}
.ngg-gallery-thumbnail img:hover {
background-color:#fff !important;
-webkit-opacity: 0.40;
-moz-opacity: 0.40;
opacity: 0.40;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; ¨
}
wow thank you very much for this effect! its awsome
Love this! Thanks Scott
hello!, sorry for my english , i’m from Argentina. the code posted for Graf works perfectly. also works in firefox.