<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS swap hover effect - Jquery</title>
<!--style type="text/css"> 
		body {
			background:#f6f9e7;
			font: 0.8em "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica;
			color: #444d27;
		}
		p, h1, h2, h3, h4 {
			margin-bottom:1em;
			font-weight:normal;
		}
		h2 {
			font:1.8em Georgia, "Times New Roman", Times, serif;
			text-align:center;
		}
		h3 {
			font:1.5em Georgia, "Times New Roman", Times, serif;
		}
		a, img {
			border:none;
		}
		a {
			color:#d46e00;
			text-decoration:none;
		}
		.center {text-align:left;}
		#wrap {
		position:absolute;
			margin:20px auto;
			left:200px auto;
			width:200px;
		}
		#wrip {
	position:absolute;
	margin:20px auto;
	right:200px auto;
	width:200px;
	left: 779px;
	top: 15px;
		}
		
		/* ---- styling the list ---- */
		
		#work {
			float:left;
			list-style:none;
			margin:0;
			padding:0;
		}
		#work li {
			float:left;
			display:block;
			width:235px;
			margin:10px;
			display:inline;
			padding:3px; 
			background:#fff;
			border:1px solid #cad789; 
			height:154px;
		}
		#work li a {
			border:none;
		}
		#work p {
			margin-bottom:0;
		}
		
		
		/* ---- show-hide elements ---- */
		
		#work li .show{
			display:block;
			width:235px;
			height:154px;
		}
		#work li .hide {
			color:#d4df9d;
			text-align: left;
			height: 0;
			overflow: hidden;
			background:#687b00;
		}
		#work li:hover .hide, #work li.over .hide {
			cursor: pointer;
			height: 133px;
			padding:10px;
			width:215px;
		}
		#work li:hover .show, #work li.over .show {
			height: 0;
			overflow: hidden;
		}
		
		#work li a {
			color:#e9ff73;
			font-size:1.3em;
		}
		#work li a:hover {
			color:#fff;
		}
</style-->
 
<!-- add hover class to #work li if the mouse over -->
<!--[if lte IE 7]>
 
 
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">$(function() {
		$('#work li').mouseover
			(function(){
			$(this).addClass('over');
		});
		$('#work li').mouseout
			(function(){
			$(this).removeClass('over');
		});
 
});
</script>
<!['endif']-->
</head>

<body>
<div id="wrap">
<h2>CSS Hover Effect</h2>
<h4 class="center">With JQuery-based hover fix for IE6</h4>
<ul id="work">
    <li>
    	<a class="show" href="#"  title="SDDirect Website Development"><img src="images/sdd.jpg" alt="Social Developement Direct" /></a>
      <div class="hide"><a href="#">SDDirect Website Development</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div>
    </li>
    
    <li><div class="show"><a href="#" title="Lensview Gallery Design" class="thumb"><img src="images/lenseview.jpg" alt="White Horse"  /></a></div>
 <div class="hide"><a href="#">Lensview Gallery Design</a><p>Photo gallery design and integration for Bach Tran</p></div>
    </li>
    <li>
    	<a class="show" href="#"  title="SDDirect Website Development"><img src="images/ard.jpg" alt="Social Developement Direct" /></a>
      <div class="hide"><a href="#">SDDirect Website Development</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div>
    </li>
    <li><a class="show" href="#" title="Whitehorse Website Design"><img src="images/mpi.jpg" alt="White Horse" /></a>
      <div class="hide"><a href="#">Whitehorse Website Design</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div>
    </li>
    
  </ul>
</div>

<div id="wrip">
<ul id="work">
<li><a  class="show" href="#" title="Whitehorse Website Design" ><img src="images/whitehorse.jpg" alt="White Horse" /></a>
      <div class="hide"><a href="#">Whitehorse Website Design</a><p>Design and develop XHTML/CSS for The White Horse Inn</p></div>
    </li>
	<li><a class="show" href="#" title="Lensview Gallery Design"><img src="images/herbal.jpg" alt="White Horse"  /></a>
 
     <div class="hide"><a href="#">Lensview Gallery Design</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div>
    </li>
 </ul>
</div>

<form action="">
 <fieldset>
  <legend>My awesome form</legend>
    <label>Name: </label> <input type="text" class="input" />
    <label>Password: </label> <input type="password" class="input" />
    <label>&nbsp; </label> <input type="submit" value="Submit" class="button" /> <input type="submit" value="Cancel" class="button" />
 </fieldset>
</form>


</body>
</html>
