CSS3 Rounded Thumbnail Gallery

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

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:

Typography (via @font-face)
Animations (via @keyframes and transform)
Transitions (via transition and transition-delay)
REAL Rounded Corners (via border-radius)
Shadows for everything! (via text-shadow and box-shadow)

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 {
	width:60px;
	height:60px;
	background:#fff;
	border:2px solid transparent;
	-moz-border-radius:60px;
	-webkit-border-radius:60px;
	border-radius:60px;
}
img.round_thumbnail:hover {
	width:100px;
	height:100px;
	border:2px solid #ccc;
	-moz-border-radius:160px;
	-webkit-border-radius:60px;
	border-radius:100px;
}

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.

DEMO
Rounded Thumbnail gallery

-or-

DOWNLOAD
Rounded Thumbnail gallery