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

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/04/jQuery-image-hover-information.pnghttp://w3lessons.info/wp-content/uploads/2013/04/jQuery-image-hover-information-150x150.pngKarthikeyan KFreebiesjqueryWeb Design
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.CSS CodeJquery CodeHTML CodePlease don’t...