Create Resizing Thumbnails Using CSS Overflow

Advertisement


enlargethumb.png

If you've ever struggled with only having room for a small thumbnail in your entry or article but wish to you could easily show a larger version, this tutorial from CSS Globe might just have the answer for you! And it's all done with html and css.

This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don't have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.

Create Resizing Thumbnails Using Overflow Property | Css Globe

February 17, 2008 in CSS Snippets

Search etc.

More Entries From CSS Snippets

5 Rules for More Readable CSS Files From Woork Up, a nice article that illustrates five simple practical rules that can help you write well structured and more readable CSS files... (October 19, 2009)

Hover Effects in Web Design Spoonfed Design has a nice article detailing and illustrating the best practises and techniques for using hover effects in web design, complete with 30... (April 16, 2009)

Two Nice CSS Reads From Designer Daily, some tips for making your links better by giving more information to your users before they click. 8 CSS tips for better... (March 16, 2009)

Simple Scalable CSS Based Breadcrumbs Veerle Pieters has a great article and "how to" create a simple css-based breadcrumb navigation using only one image and some basic CSS styling with... (February 11, 2009)

16 Usable CSS Graph and Bar Chart Tutorials Speckyboy has a great round-up of tutorials detailing how to use CSS (and sometimes a bit of PHP) to create a wide variety of... (February 4, 2009)