Featured Contents with Bottom Thumbnails Scroll

This professional featured contents with bottom scrolling thumbnails is a good fit for any style website. If your website gives off a professional vibe, then you should create professional looking images for your featured contents. On the hand, if you have a creative art style, it's better to use creative arts as your images for your featured contents. Either way, it adds some funtionality to your website and allows your main topics to stand out so visitors know what to expect from your websit before digging in any further. Another nice featured content slider you can add to your collection.

Demo Page

Provided here is the CSS and HTML section code to implement this tutorial.
CSS section code (This section code should be placed right before the closing head tag.)

#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(http://blogspotvision.com/TinySlideshow/images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(http://blogspotvision.com/TinySlideshow/images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(http://blogspotvision.com/TinySlideshow/images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(http://blogspotvision.com/TinySlideshow/images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(http://blogspotvision.com/TinySlideshow/images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}

HTML section code (This section code should be placed where you would like the featured content to appear. This can be done by adding a new gadget under page elements, or applied directly within the HTML section of the template.)

<ul id='slideshow'>
<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/20265_277851771584_504491584_3259111_1375205_n.jpg</span>

<p>New artwork coming soon</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/20265_277851771584_504491584_3259111_1375205_n.jpg' width='90'/></a>
</li>
<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/59556_433785324635_239454609635_4840367_771304_n.jpg</span>
<p>Stay tuned for Chiefdoodle.com version 3</p>

<img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/59556_433785324635_239454609635_4840367_771304_n.jpg' width='90'/>
</li>
<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/tees.jpg</span>
<p>New apparels coming soon</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/tees.jpg' width='90'/></a>

</li>
<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/laptop.jpg</span>
<p>Deck out just about anything with Chiefdoodle</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/laptop.jpg' width='90'/></a>
</li>

<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/cdavatar.jpg</span>
<p>You see it on Facebook.. get yours!</p>
<img alt='Blue Fish' height='70' src='http://blogspotvision.com/bspotvision/cd3/cdavatar.jpg' width='90'/>
</li>
<li>

<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/48060_446898311584_504491584_4989864_6379255_n.jpg</span>
<p>Sneak-peak of whats coming</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/48060_446898311584_504491584_4989864_6379255_n.jpg' width='90'/></a>
</li>
<li>
<h3>@theCDLP</h3>

<span>http://blogspotvision.com/bspotvision/cd3/58383_446682166584_504491584_4984734_3817816_n.jpg</span>
<p>Elevate your life..</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/58383_446682166584_504491584_4984734_3817816_n.jpg' width='90'/></a>
</li>
<li>
<h3>&quot;Tap into the mind of the unconscious&quot;</h3>
<span>http://blogspotvision.com/bspotvision/cd3/elevatelife.jpg</span>
<p>Where creativity sparks innovations</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/elevatelife.jpg' width='90'/></a>
</li>
</ul>
<div id='wrapper'>
<div id='fullsize'>
<div class='imgnav' id='imgprev' title='Previous Image'/>
<div id='imglink'/>

<div class='imgnav' id='imgnext' title='Next Image'/>
<div id='image'/>
<div id='information'>
<h3/>
<p/>
</div>
</div>
<div id='thumbnails'>
<div id='slideleft' title='Slide Left'/>

<div id='slidearea'>
<div id='slider'/>
</div>
<div id='slideright' title='Slide Right'/>
</div>
</div>
<script src='http://blogspotvision.com/TinySlideshow/compressed.js' type='text/javascript'/>
<script type='text/javascript'>
$(&#39;slideshow&#39;).style.display=&#39;none&#39;;
$(&#39;wrapper&#39;).style.display=&#39;block&#39;;
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link=&quot;linkhover&quot;;
slideshow.info=&quot;information&quot;;
slideshow.thumbs=&quot;slider&quot;;
slideshow.left=&quot;slideleft&quot;;
slideshow.right=&quot;slideright&quot;;
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active=&quot;#fff&quot;;
slideshow.init(&quot;slideshow&quot;,&quot;image&quot;,&quot;imgprev&quot;,&quot;imgnext&quot;,&quot;imglink&quot;);
}
</script>

Note: All images should be replaced with that of yours, and as always is open for customizations.