Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

CSS3 Rounded Thumbnail Gallery

Posted by bcmoney on October 16, 2010 in CSS with No Comments

No Gravatar
English: CSS3 Styling

CSS3 Logo - Image via Wikipedia

CSS3 is shaping up to be quite promising.

Some of the features and shiny new toys that have me excited most are:


In this spirit, the following is an interactive rounded thumbnail gallery which was not previously possibly without some serious back-end coding to re-render each individual image as a separate “rounded thumbnail” file (using something like C++/GD or PHP/ImageMagick, etc); and now it’s become just a few lines of CSS using some of the aforementioned CSS3 goodies!

Here’s the part that generates the rounded image on the client (requires a modern browser with CSS3 border-radius such as FF4+, IE9+, Safari 5+, Chrome 8+, Opera 11+):

/* Round Thumbnails */
img.round_thumbnail {
	border:2px solid transparent;
img.round_thumbnail:hover {
	border:2px solid #ccc;

As for the innovative approach to pure CSS3 popups, I take no credit at all, the credit is due to The CSS Ninja and his excellent Futurebox tutorial.