Custom boxes design for products using CSS3

Cool responsive products box design using css3 and cool effect

DEMO

HTML

<div class="productShell">
    <div class="productBox small color-green">
        <aside>
            <h4>Nature</h4>
        </aside>
        <img src="http://lorempixel.com/240/240/nature/" />
    </div>
    <div class="productBox small color-blue">
        <aside>
            <h4>Business</h4>
        </aside>
        <img src="http://lorempixel.com/240/240/business/" />
    </div>
    <div class="productBox small color-orange">
        <aside>
            <h4>City</h4>
        </aside>
        <img src="http://lorempixel.com/240/240/city/" />
    </div>
    <div class="productBox small">
        <aside>
            <h4>Transport</h4>
        </aside>
        <img src="http://lorempixel.com/240/240/transport/" />
    </div>
     <div class="productBox small">
        <aside>
            <h4>Sports</h4>
        </aside>
        <img src="http://lorempixel.com/240/240/sports/" />
    </div>
     <div class="productBox small">
        <aside>
            <h4>Technics</h4>
        </aside>
        <img src="http://lorempixel.com/240/240/technics/" />
    </div>
</div>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
    background: #ddd;
}
.productShell {
    width: auto;
    background: #fff;
    margin: 0 auto;
    padding: 15px;
    overflow: hidden;
}
.productBox {
    float: left;
    margin: 3px;
}
.productBox aside {
    cursor: pointer;
    background: #555;
    position: absolute;
    z-index: 2;
}
.productBox aside h4 {
    color: #fff;
    text-transform: uppercase;
    text-align: right;
    font-weight: normal;
    font-size: 24px;
    margin: 0;
    padding: 15px;
    bottom: 0;
    position: absolute;
}
.productBox img {
    position: absolute;
    z-index: 1;
}
.productBox, .productBox aside, .productBox img {
    width: 270px;
    height: 270px;
}
.productBox.small, .productBox.small aside, .productBox.small img {
    width: 130px;
    height: 132px;
}
.productBox.small h4 {
    font-size: 14px;
}
.color-blue aside {
    background: #258dc8;
    background: -moz-linear-gradient(top, #258dc8 0%, #1f7baf 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #258dc8), color-stop(100%, #1f7baf));
    background: -webkit-linear-gradient(top, #258dc8 0%, #1f7baf 100%);
    background: -o-linear-gradient(top, #258dc8 0%, #1f7baf 100%);
    background: -ms-linear-gradient(top, #258dc8 0%, #1f7baf 100%);
    background: linear-gradient(to bottom, #258dc8 0%, #1f7baf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#258dc8', endColorstr='#1f7baf', GradientType=0);
}
.color-green aside {
    background: #89c825;
    background: -moz-linear-gradient(top, #89c825 0%, #6ea11d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #89c825), color-stop(100%, #6ea11d));
    background: -webkit-linear-gradient(top, #89c825 0%, #6ea11d 100%);
    background: -o-linear-gradient(top, #89c825 0%, #6ea11d 100%);
    background: -ms-linear-gradient(top, #89c825 0%, #6ea11d 100%);
    background: linear-gradient(to bottom, #89c825 0%, #6ea11d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c825', endColorstr='#6ea11d', GradientType=0);
}

.color-orange aside {
    background: #ffa84c; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #ffa84c 0%,#ff7b0d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #ffa84c 0%,#ff7b0d 100%); /* IE10+ */
    background: linear-gradient(135deg,  #ffa84c 0%,#ff7b0d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
}

jQuery

$('.productBox').hover(function () {
    $(this).find('aside').hide("slide", {
        direction: 'right'
    });
}, function () {
    $(this).find('aside').show("slide", {
        direction: 'left'
    });
});

DEMO