Display Product Information on a Hover over Thumbnails using jQuery

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 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