Product List – This could be your portfolio list, product list, image list, etc.  Listing your products with displaying information when hovering thumbnails is useful when selling your products online. I am going to share a simple jQuery code & CSS code to achieve this trick.

PRODUCT DISPLAY INFO WHEN HOVERING THUMBNAILS
PRODUCT DISPLAY INFO WHEN HOVERING THUMBNAILS

CSS Code

li,a,img,ul,div,span {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
.prodlist { list-style: none; margin: 20px; }
.prodlist li {
	display: inline-block; position: relative; color: #eee; cursor: pointer; text-shadow: 1px 1px rgba(0,0,0,0.3); margin-bottom: 3%; }
.prodlist li a { color: #FB9337; }
.prodlist li .thumb { padding: 5px; border: 3px solid #ddd; }
.prodlist li .thumb img { width: 225px; }
.prodlist li .content { position: absolute; top: 5px; left: 5px; width: 225px; height: 163px; overflow: hidden; }
.prodlist li .contentinner { background: url(bg.png); padding: 5px 7px; margin-top: 132px; height: 163px; }
.prodlist li .title { color: #fff; font-family:Arial,Helvetica,sans-serif; font-size: 13px; }
.prodlist li .title:hover { color: #FB9337; }
.prodlist li .price { color: #fff; font-weight: bold; float: right; }
.prodlist li .by { font-size: 12px; font-style: italic; margin-top:8px; }
.prodlist li .desc { font-size: 12px; margin: 5px 0; line-height: 16px; }

Jquery Code

jQuery(document).ready(function(){
	jQuery('.prodlist li').hover(function(){
		jQuery(this).find('.contentinner').stop().animate({marginTop: 0});
	},function(){
		jQuery(this).find('.contentinner').stop().animate({marginTop: '132px'});
	});
});

HTML Code

<ul class="prodlist">
  <li class="one_third">
      <div class="thumb"><a href=""><img src="1.jpg" alt="" /></a></div>
      <div class="content">
          <div class="contentinner">
              <div>
                  <span class="price">$45</span>
                  <a href="" class="title">Sony Camera</a>
              </div>
              <div class="by">By: <a href="http://w3lessons.info">itzurkarthi.com</a></div>
              <p class="desc">Your product description goes here</p>
          </div>
      </div>
  </li>
</ul>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo

Related Posts