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!
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="http://1.bp.blogspot.com/-vxjOxEP6LB0/Te-8csJeSCI/AAAAAAAAAI0/TdlvX8z-wpE/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://lh4.googleusercontent.com/-RLDr7UzMvLc/TXi1TBe_mOI/AAAAAAAAAIU/O3k4CDJ9qpE/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://lh4.googleusercontent.com/-HOPYmUk-cCM/TW_TspwS9QI/AAAAAAAAAIA/XMdLUFlPRdw/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;
}
