3D thumbnails with CSS

Construction of the overlayFirst off, I am a medical student – not a web developer. Feel free to flame me all you want about standards. In fact, just skip the article and scroll straight down to the comment box right now you standards nazi. I’ll give you a topic: “IE rules, Mozilla drools”. OK, go…

Now that we got that out of the way, let’s get to the code. I came up with this idea after reading this article about png gradient overlays on aListApart. It got me thinking about all the wonderful applications of transparency.

So, I got to work. Not less than 2 hours later I had beautiful 3D effects on my image thumbnails in my photo gallery. Go ahead and check ’em out. I didn’t implement them on the front page, just on the album page. I also use a grayscale filter (that only works in IE). While the effect works great on color photos, I think that it really pops on black and white photos. (IE haters can scroll to that comment box now…)

On the left is an example of what I did. The top image is the thumbnail. The middle image is the transparent overlay image, and the bottom image is what they look like together. Here’s my HTML:

Code HTML

As you can see, both images are inside the anchor, which is inside the div element. The CSS required to style this involves a little positioning magic. We set the positioning on the div to “relative” (the default, but in this instance we need to declare it), and then set the positioning on the img elements to absolute. This will allow you to position the img elements “absolutely relative to” the div. Got it?

Next, we set the z-index on the overlay to some obscenely high number so that it renders in front of everything else. I used 100, but feel free to go for broke on this one. Is 1,000,000 too much? Who knows?

Feel free to have fun with it. I used the visibility attribute to hide the overlay on hover. This makes it flatten out when you hover it. Check it out in this example.

CSS codeHere is the CSS that I used in the example. Now, I’m sure there are a million uses for this. One of the ideas I’ll be implementing in my photo gallery is a little “next>>” overlay that goes over the images for navigation. (Not implemented in the current theme)

Please show me how you use it on your site by shooting me a link in comments.

I have zipped up my example files, along with the photoshop image I used to create the effect. You can download those suckers here: Example files (ZIP)

Finally, for those lazy kids out there in need of instant gratification, just unzip these files to your default-dark theme directory in zenphoto, and you can be cool like me…Default Dark Zenphoto Mod (ZIP)

[Lots of love to Zenphoto]

 

2 thoughts on “3D thumbnails with CSS”

  1. This is pretty cool 🙂 It could even be generalized to any kind of transparent frame or edge on the thumbnail or photo (fuzzy, cool borders, etc.) Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *