How to Make a Threadless Style T-Shirt Gallery

How to Make a Threadless Style T-Shirt Gallery


The Basic Idea

Threadless is one of my absolute favorite t-shirt companies, so naturally I frequent their sites. One particular site (Type Tees) caught my eye with how they displayed shirts. Armed with jQuery, I went to work, while making some tweaks of my own.

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.

Here's the gist

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. The caption is self explanatory, but the overlay in this tutorial is what rounds the bottom corners using a semi-transparent png.

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.

The CSS

The HTML

This is the HTML for a single shirt, but you could repeat the rows and shirt containers (.teebox) as needed.

The jQuery

The Wrap Up

The primary differences between the Threadless version and my own are the jQuery and method of image hiding. My version was based on observing the frontend of their site, with some referencing of the code, which they appeared to use straight Javascript for. Additionally they made the image a background image, while I kept it as a normal img. Other than that, there are no glaring changes as far as I know.

If you’re in any way lost, check out the downloadable files, they help a bunch I swear. Any particularly pressing issues can be brought up in the comments. Keep in mind you may need to implement the PNG fix in order to make this widely compatible. Also, as a way of thanking Threadless for bringing up this wonderful idea, be sure to visit them.

Posted Friday, June 26th, 2009 · Back to Top

SPONSOR

Add Comment

50 Comments 89 Mentions

  1. BeyondRandom Author Editor

    Great tut! I have a shirt gallery site and I have been looking for a cool way to show off the shirts…will have to try this.
    .-= BeyondRandom´s last blog ..2012 (HD) Movie Trailer =-.

    ·

  2. Paul Author Editor

    Great tutorial.
    Nice job! Gotta love jQuery!

    ·

  3. Callum Chapman Author Editor

    That’s a real nice effect, love it!
    .-= Callum Chapman´s last blog ..BLOG.CALLUMCHAPMAN HAS MOVED! =-.

    ·

  4. 2tone Author Editor

    WOW! Very nice effect

    ·

  5. Music T-shirts Author Editor

    Thank you so much for this post. Really nice.

    ·

  6. sonichtml Author Editor

    nice effect…i live it..

    ·

  7. Aayush Author Editor

    great post….

    ·

  8. nox Author Editor

    i test in IE and safari but IE dont work :/

    ·

    • Sam Dunn Author Editor

      @nox I have tested/made sure it works in Firefox, Safari, and IE 7

      ·

  9. Mladen Author Editor

    Lovely!! Great post!!

    ·

  10. thekanyon Author Editor

    Great Effect! It will work on IE7+. IE6 doesn’t support png transparency so you might need to use gif files for a similar effect.

    ·

  11. Max Author Editor

    Problem with overlay in IE8. The overlay works fine but after mouseout the rounded corners leave a black outline. It’s not very noticeable in your demo, but I made a custom overlay and it is very noticeable, although both your overlay and my overlay work and looke fine in FF. Please let me know if there is a fix for IE8. Thanks!

    ·

  12. Tom Author Editor

    Hey great idea thanks for sharing this.

    ·

  13. elcodigodebarras Author Editor

    Thanks for this usefull resource; Long time ago I was looking for something like this, for my t shirts designs: http://www.deviantart.com/#order=9&q=elcodigodebarras+t+shirt
    .-= elcodigodebarras´s last blog ..CUT AND PASTE (Copiar y pegar) – Fuera del mundo virtual =-.

    ·

  14. ChattyShirts Author Editor

    Nice, thanks for sharing! This plus the GoMedia tutorial for photo realistic t-shirt mock-ups can work quite well. I also like that it uses jQuery, which makes it simpler and leaner to use with a WordPress blog.
    .-= ChattyShirts´s last blog ..Writable Thought Bubble =-.

    ·

  15. Bradford Sherrill Author Editor

    nice concept

    ·

  16. T-Shirt Printing Author Editor

    Thanks for the great tutorial – can imagine that many t-shirt web sites will start adopting this for a while

    Alex @indigo
    .-= T-Shirt Printing´s last blog ..London Calling =-.

    ·

  17. Liam Author Editor

    This does not require jQuery at all, could all be done with CSS.

    ·

  18. Sam Dunn Author Editor

    @Liam
    I am going for compatibility on this one, and the actual Threadless site makes use of Javascript to do this as well.

    ·

  19. Jared Roberts Author Editor

    Two Girls One Cup…. Really? LOL!

    ·

  20. Sander Author Editor

    @Sam Dunn

    I agree with Liam. Although the actual Threadless site uses Javascript, this could easily be done with some simple CSS. The only compatibility issue lies in the :hover at IE6. But even then a few lines of vanilla Javascript can fix that, there’s no need for a 100k jQuery solution.

    A quick mockup: http://office.react.nl/~sandervl/jquery-madness/
    .-= Sander´s last blog ..Licht aan het einde van de steeg, 22-08-2009 =-.

    ·

  21. Sander Author Editor

    My apologies; the link above is not accessible for the outside world. Please use http://home.react.nl/~sandervl/jquery-madness/ :)
    .-= Sander´s last blog ..Licht aan het einde van de steeg, 22-08-2009 =-.

    ·

  22. Sam Dunn Author Editor

    @Sander
    That is certainly a route that is becoming increasingly more doable and I am a big fan of pure CSS. I see that you have taken the inititiave to go ahead and make a page of the CSS solution, dedicated aren’t we?

    Personally I don’t view jQuery as a 100k solution as in many cases I am not loading it for the sake of doing one compatible :hover.

    ·

  23. jams Author Editor

    nice works guys…

    ·

  24. t shirt printing Author Editor

    Wow! I have been seen a lot of t shirt sites but this is one is really cool. Will definitely give this a try.
    .-= t shirt printing´s last blog ..T Shirt Printing =-.

    ·

  25. brian Author Editor

    really cool tutorial ,Thanks!

    ·

  26. Agon Author Editor

    Great tutorial…like it…

    ·

  27. Christen Author Editor

    How about the like button for each item coding?

    ·

  28. Масла Author Editor

    Very nice works guys… great tutorial

    ·

  29. 9ale7 Author Editor

    thanks

    ·

  30. perfect world Author Editor

    Wow, thats a really clever way of about it!

    ·

  31. mosquito killer Author Editor

    Hi, can I use your code on my wordpress blog to my gallery for my product? Thanks.

    ·

  32. Max Author Editor

    I tried it with Chrome and IE and the code works very well

    ·

  33. Rock tees Author Editor

    I’ll definetely give this a try on my website. Nice code :)

    ·

  34. rift platinum Author Editor

    Look like cool plugins, lots of functionalities in a single plugins. news letter plugin is a sparky one among theme. Hope i will get a chance to grab them for free

    ·

  35. moedas pw Author Editor

    Hi everyone, thank you for your support. The contest is closed.

    The winners are listed at the end of this article. Thank you!

    ·

  36. Booth Author Editor

    These clothes are very fahionable, i like them.

    ·

  37. Inspirational Quotes Author Editor

    How to Make a Threadless Style T-Shirt Gallery | Build Internet I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You’re incredible! Thanks! your article about How to Make a Threadless Style T-Shirt Gallery | Build Internet Best Regards Shane Shane

    ·

  38. Clothes 2 Order Author Editor

    Nice tutorial guys

    ·

  39. attingeHect Author Editor

    Online Casino Games of [url=http://www.planet23.com/allslots-bonus-code]AllSlots Casino[/url] are have been licensed from Microgaming Software. The software is available in a download or instant play format.

    There are over 250 Casino Games in All Slots Casino. You can find: Classic Slots, Video Slots, Progessive Jackpots, Video Poker, Online Keno, Table Card Games, and more.

    ·

  40. Adlogo Author Editor

    Hi,

    This is fantastic advice, especially for those in the t-shirt printing. Thanks for the blog.

    ·

  41. Icon Printing Author Editor

    Great tutorial and very useful for those in the tshirt printing industry.

    Alex
    Icon Printing

    ·

  42. But Author Editor

    Find out these pointers read on and learn to know how to submit an application performing this which you policy your corporation today. alertpay

    ·

  43. ashburn window treatments Author Editor

    I’m pretty pleased to find this page. I wanted to thank you for ones time due to this wonderful read!! I definitely liked every little bit of it and i also have you book-marked to look at new stuff in your site.

    ·

  44. fredericksburg window treatments Author Editor

    I was very happy to discover this website. I wanted to thank you for ones time just for this wonderful read!! I definitely really liked every bit of it and I have you saved to fav to see new information in your website.

    ·

  45. cheap viagra Author Editor

    I’m very pleased to find this web site. I need to to thank you for your time for this particularly wonderful read!! I definitely liked every bit of it and i also have you book-marked to see new things on your blog.

    ·

  46. düğün şekeri Author Editor

    düğün şekeri

    ·

  47. Blanchensp Author Editor

    lifeline hospital altec lansing 251 nikon lenses philips web camera paper fan supplies psyclone cable psp music video download remington pole saw strawberry chocolate solo cup pany [url=http://www.marcjacobspurse2013.com/]マークジェイコブス アウトレット[/url]
    The Dash rosetta stone application rendering mainboard msi kenwood kdc mp332 [url=http://www.coachbagsjpsite.com/]コーチ 激安[/url]
    brother ml 300 separation anxiety in dogs rcard puma trainers for women nextbase tablet dvd [url=http://www.mcmsaihujp.com/]MCM 販売[/url]
    burr coffee mills ogre battle aluminum screen mary moo moo pamper yourself

    ·

  48. Woven Inc Screen Printers Author Editor

    Thanks for sharing this, I was looking for a way to display the t shirts we have printed on our website and some of this code might come in handy!

    ·

  49. Daniyal Author Editor

    good tutorial. Got to learn something new

    ·

 

Build Internet by One Mighty Roar. Since 2008.