Let's add a semi-transparent effect to the thumbnails, and each thumbnail will get back to its full opacity when hovered over.
This can be easily implemented via the two built-in CSS class:
thumb and
thumb-on:
#thumbs .thumb img{ opacity:0.6;filter:alpha(opacity:60); }
#thumbs .thumb-on img{ opacity:1;filter:alpha(opacity:100);}
And there you have it!
- If there are many thumbnails and the containing block does not have enough room to show them, you can make the slider work together with our jQuery Slider. See jQuery Slideshow.
- This demo needs a valid license to enable the thumbnail functions, such as clicking on a thumbnail will switch the slider to the corresponding slide. It won't work on the production server (though it works locally) if not licensed.