Free Threadless Style T-Shirt Gallery
Category: Image Galleries (depraced!)
- views: 2 369
- 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.
We need your support!
Make a donation to help us stay online
Bitcoin (BTC)
bc1q08g9d22cxkawsjlf8etuek2pc9n2a3hs4cdrld
Bitcoin Cash (BCH)
qqvwexzhvgauxq2apgc4j0ewvcak6hh6lsnzmvtkem
Ethereum (ETH)
0xb55513D2c91A6e3c497621644ec99e206CDaf239
Litecoin (LTC)
ltc1qt6g2trfv9tjs4qj68sqc4uf0ukvc9jpnsyt59u
USDT (ERC20)
0xb55513D2c91A6e3c497621644ec99e206CDaf239
USDT (TRC20)
TYdPNrz7v1P9riWBWZ317oBgJueheGjATm
Information |
|||
 |
Users of GUESTS are not allowed to comment this publication. | ||