Demo 5 - Semi-transparent Thumbnails

Demos: 1234 5678

Welcome to Menucool.com Customizable Transition Effects Image Slider Plain Javascript Slider Lazy Loading Image Light weight Image Slider Fine tuned. Sleek & Smooth Easy-to-Use Slider
HTML caption. Back to Menucool.
Smart Lazy Loading Image
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 done 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 lots of thumbnails and the containing block does not have enough room to show them, you can consider showing the thumbnails in multiple columns or rows by tweaking the js-image-slider.css. Another solution is to make the slider work together with Menucool jQuery Slider. See jQuery Slideshow.

Visit online Demo 5 and JavaScript Image Slider for detailed instructions.

This demo requires a license for its advanced features.