Grid View Mockup

by nathanziarek

HTML

<div class="product">
    <div class="visual">
        <img src="http://lorempixel.com/400/400/sports/9" />
    </div>
    <div class="details">
        <a class="title">Lorem ipsum del amore del</a>
        <div class="mfg">Direct Supply&copy; Brands</div>
        <div class="stars">* * * * *</div>
        <div class="flags">previously purchased</div>
    </div>
    <div class="cost">
        <div class="partnum">#44213</div>
        <div class="price">$53.99</div>
    </div>
    <div class="actions">
        Add to Cart
    </div>
</div>

<div class="product">
    <div class="visual">
        <img src="http://lorempixel.com/400/400/sports/5" />
    </div>
    <div class="details">
        <a class="title">Lorem ipsum del amore del ipsum don morea do nullis der aquinus</a>
        <div class="mfg">Direct Supply&copy; Brands</div>
        <div class="flags">previously purchased</div>
    </div>
    <div class="cost">
        <div class="partnum">#44213</div>
        <div class="price">$53.99</div>
    </div>
    <div class="actions">
        Add to Cart
    </div>
</div>

<div class="product">
    <div class="visual">
        <img src="http://lorempixel.com/400/400/sports/8" />
    </div>
    <div class="details">
        <a class="title">Lorem ipsum del amore del ipsum don morea do nullis der aquinus</a>
        <div class="mfg">Direct Supply&copy; Brands</div>
        <div class="stars">* * * * *</div>
    </div>
    <div class="cost">
        <div class="partnum">#44213</div>
        <div class="price">$53.99</div>
    </div>
    <div class="actions">
        Add to Cart
    </div>
</div>

<div class="product">
    <div class="visual">
        <img src="http://lorempixel.com/400/400/sports/7" />
    </div>
    <div class="details">
        <a class="title">Lorem ipsum del amore del ipsum don morea do nullis der aquinus</a>
        <div class="mfg">Direct Supply&copy; Brands</div>
    </div>
    <div class="cost">
        <div class="partnum">#44213</div>
     ...

CSS

body { background: #eee; font-family: Open Sans; font-size: 13px; width: 690px; margin: 30px auto }
.product { width: 200px; background: white; box-shadow: 0 0 5px #bbb; position: relative; background: black; height: 235px; overflow: hidden; float: left; margin:0 0 30px 30px }
.details { max-height: 38px; overflow: hidden; position: absolute; bottom: 38px; left: 0; background: white; -webkit-transition: 250ms ease all; width: 100% }

.title { padding: 3px 10px; display: block; min-height: 38px  }
.mfg  { padding: 3px 10px; color: #888  }
.stars { padding: 3px 10px; color: orange  }
.flags { margin: 3px 10px; background: #336699; display: inline-block; padding: 2px 5px; color: white; border-radius: 3px; font-size: 10px }
.cost { background: white; width: 100%;position: absolute; right: 0; bottom: 0; height: 38px;-webkit-transition: 250ms ease bottom }
.price { color: #663399; position: absolute; right: 10px; bottom: 10px }
.partnum { position: absolute; left: 10px; bottom: 10px }
.actions { position: absolute; height: 38px; bottom: -38px; left: 0; width: 100%; -webkit-transition: 250ms ease bottom; background: orange; line-height: 38px; text-align: center }

img { width: 100%;-webkit-transition: 500ms ease opacity; display: block; }

.product:hover .details { max-height: 250px; bottom: 76px }
.product:hover img { opacity: .5 }
.product:hover .cost { bottom: 38px }
.product:hover .actions { bottom: 0 }