Free Threadless Style T-Shirt Gallery
Date: 30 April 2011 | Posted by: Src
Demo:
http://9.bb/286885/5892-demo-teeshirts
Source URL:
http://9.bb/286885/5892-demo-teeshirts
The Basic Idea
Here’s the gist: There’s a thumbnail which is a full sized image in a container div, which is smaller than the full sized image. The image is centered within it, but doesn’t show entirely because overflow:hidden is turned on. When the mouse hovers over the thumbnail, overflow:hidden gets turned off, and the entire image is displayed.
The caption and overlay are positioned on top of the thumbnail/image while all this is going on, disappearing when the full image is displayed from the mouse hovering on top of it.
Customizing It
Not everyone is looking to only display t-shirts with this method, it works equally well with standard images too. The overlay image should be the same size as your thumbnail – it serves to define the size of the link. You can use the overlay to create some neat effects, I did rounded corners, but you could do things like gradients or different corners. I’ve included the code required below, but really, you should probably just download the attached files as it’s easier to tweak from there.
See full article