LinkedIn like news Gallery using jQuery & CSS ~ Web Speaks

The most popular professional social network has recently done a lot of design changes in its site. And the site has gone really awesome. I really many of their new design features. Their news gallery on home page attracted my mind towards it and I decided to create it for my readers. So here is LinkedIn style news gallery.... See it working!

Live Demo Download Script

HTML Markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Webspeaks.in | Linkein like news gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="gallery">
 <h2>LinkedIn Today</h2>
 <ul>
  <li>
   <a href="http://www.webspeaks.in/2011/06/live-background-change-using-jquery.html" target="_blank">
    <p class="hd">Live background Change using jQuery</p>
    <p class="link">via webspeaks.in</p>
    <p class="img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU1lxLmvhR0tjf1zd6tEdjgSD0tVi7S-8VSTpY8cQ_iX3-jQ4sXRwTz9Q0hwSwFY55dGsXDBjZirT8apG2tIHU__wQ-0oVVIrn8VuYH5uaz-GUOqXFES2F7xM2q_21DG34sRrLLTrQUxY/s400/Webspeaks.in+-+Live+background+change+with+jQuery+2011-06-08+23-45-50.png" /></p>
   </a>
  </li>
  <li>
   <a href="http://www.webspeaks.in/2011/03/creating-stylish-graphs-with-php-yahoo.html" target="_blank">
    <p class="hd">Creating Stylish Graphs with PHP & Yahoo Charts</p>
    <p class="link">via webspeaks.in</p>
    <p class="img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8LF3SE_y0caGkHNub4LhfpkEgGPwVvrSoD7s4y_1luGAmlmfDB8EG2BShOzJ5aVLfkvge-qdKfK9yetVT7Q6OMIeEAdqg3vyxuKBcXpj41F1hsL0I-4W0xYlU7EOrBdXtzs2H2x_UZSk/s400/y.PNG" /></p>
   </a>
  </li>
  <li>
   <a href="http://www.webspeaks.in/2011/03/in-place-form-editing-using-jquery.html" target="_blank">
    <p class="hd">In-Place Form Editing using jQuery</p>
    <p class="link">via webspeaks.in</p>
    <p class="img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyUlyOxnfopiaVk0kX_hZGJ9Im-RHhEXingjUKwyqJHvwuZEp7cNZMqwIbkbK6m1r9y7zcJOoPhZCPM1_IPbuzc5A_X6WpvWNKD_Ik4tNM8UsKEk5FDTkyM50Csn4fqXzp5iu7aCKbbf8/s400/formEdit.PNG" /></p>
   </a>
  </li>
  <li class="continue">
   <a href="http://webspeaks.in">»</a>
  </li>
 </ul>
<div>

</body>
</html>

jQuery Code:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#gallery ul li').hover(function(){
  $(this).find('p.img').animate({'marginTop':'20px'}, 'fast');
  $(this).find('p.hd').css({'color':'#069'});
 }, function(){
  $(this).find('p.img').animate({'marginTop':'-17px'}, 'fast');
  $(this).find('p.hd').css({'color':'#333'});
 });
});
</script>

CSS Code:

body{
 font-family: Arial, Helvetica, 'Nimbus Sans L', sans-serif;
}
#gallery h2{
 font-size:13px;
 font-weight:bold;
 margin-bottom:5px;
}
#gallery ul {
 list-style: none outside none; 
 overflow:hidden; 
 cursor:pointer; 
 width:666px; 
 border-top:2px solid #ededed;
 padding: 0;
 margin-top:0;
}
ul li{ 
 float:left; 
 padding:0 20px 0 0; 
 overflow:hidden;
 max-height:165px;
 _height:165px;
}
#gallery a{ color:#333; text-decoration:none;}
#gallery li p.hd{
 color:#333;
 display: block;
 font-size: 12px;
 max-height: 42px;
 min-height: 24px;
 _height: 42px;
 overflow: hidden;
 padding: 1px;
 width: 174px;
 height:28px;
}
#gallery li p.link
{
 margin:0;
 padding:0;
 color:#333;
 font-size: 11px;
 height: 13px;
 line-height: 13px;
 text-decoration:none;
 padding-left:3px;
}
#gallery li p.img{overflow:hidden; margin-top:-17px;}
#gallery li p.img img{ 
 height:109px; 
 width:176px; 
 border:1px solid #DEDEDE; 
 padding:2px; 
 overflow:hidden;
}
#gallery li.continue{
 margin-right: 0;
 width: auto;
 _display: inline;
 float: left;
 padding: 10px 0;
 position: relative;
 vertical-align: baseline;
}
#gallery li.continue a{
 color: #069;
 font-size: 40px;
 line-height: 142px;
}