How to Make a Threadless Style T-Shirt Gallery

Sam Dunn on June 26th, 2009 Posted in Tutorials

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.

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

*{
 margin:0;
 padding:0;
 }
 img{
 border: none;
 }
 body {
 text-align: center;
 background: #222;
 }
 h2{
 color: #333;
 font:italic 36px Georgia, serif;
 padding: 20px;
 border-bottom: dashed 1px #999;
 clear: both;
 }
 #content{
 width: 100%;
 margin: 0px auto;
 background: #fff;
 text-align: center;
 margin-bottom: 50px;
 }
 .row{ /*Container for each row of shirts*/
 width: 495px;
 margin: 0px auto;
 clear:both;
 padding: 20px 0;
 }
 .teebox{
 overflow: hidden; /*Prevents excess of image from showing*/
 position: relative;
 margin: 0 10px;
 width: 144px; /*Width and height define thumbnail size*/
 height: 183px;
 float: left;
 clear: right;
 z-index: 0;
 }
 .selected{
 overflow: visible; /*Display part of image that not currently visible*/
 z-index: 10;
 }

 .teebox img {
 left:-84px; /*Use this to center your image when not hovered*/
 position: absolute;
 }
 .teebox a{ /*Area that changes to selected class when hovered over*/
 display:block;
 position: relative;
 float: left;
 left: 84px; /*Use to line up the overlay image*/
 z-index: 1;
 }
 .caption{
 color: #2FB5FF;
 font:14px Arial;
 position: relative;
 float: left;
 left: 0px;
 top: 146px;
 padding: 10px;
 background: #222;
 z-index: 1;
 }

The HTML

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

<div id="content">
 <div class="row">
    <div class="teebox">
       <a href="#"><img src="overlay.png"/></a><img src="pinktee.png"/>
       <div class="caption">$10</div>
    </div>
 </div>
</div>

The jQuery

$(document).ready(function() {
 $(".teebox a").mouseover(function(){
    $(this).parent().addClass("selected");
    $(this).find('img').animate({opacity: "0.0"}, 0); //Hides overlay
    $(this).parent().find('.caption').hide(); //Hides Caption
 }).mouseout(function(){
    $(this).parent().removeClass("selected");
    $(this).find('img').animate({opacity: "1.0"}, 0); //Shows overlay
    $(this).parent().find('.caption').show(); //Shows Caption
 });
});

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.