<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery
ContentHover Plugin Examples</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="js/jquery.contenthover.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$('#d1').contenthover({
overlay_background: '#000',
overlay_opacity: 0.8
});
$('#d2').contenthover({
effect: 'slide',
slide_speed: 300,
overlay_background: '#000',
overlay_opacity: 0.8
});
$('#d3').contenthover({
overlay_width: 270,
overlay_height: 180,
effect: 'slide',
slide_direction: 'right',
overlay_x_position: 'right',
overlay_y_position: 'center',
overlay_background: '#000',
overlay_opacity: 0.8
});
$('#d4').contenthover({
hover_class: 'mybackground'
});
})
</script>
<style type="text/css">
body{ font-family:Verdana; font-size:10pt}
.mybackground { background:url(Images/transparent_bg.png); }
.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover
h3, contenthover
a { color:#fff; }
.contenthover h3, .contenthover p
{ margin:0 0 10px 0; line-height:1.4em; padding:0; }
.contenthover a.mybutton
{ display:block;
float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius:
4px; -webkit-border-radius:
4px; border-radius:
4px; }
.contenthover a.mybutton:hover
{ background:#34742d
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<table>
<tr>
<td>
<img id="d1"
src="Images/1.jpg"
width="300"
height="240"
/>
<div class="contenthover">
<h3>Hi</h3>
<p>This is test.</p>
<p><a href="#" class="mybutton">More...</a></p>
</div>
</td>
<td>
<img id="d2"
src="Images/2.jpg"
width="300"
height="240"/>
<div class="contenthover">
<h3>Hello Worls</h3>
<p>This is test.</p>
<p><a href="#" class="mybutton">More...</a></p>
</div>
</td>
</tr>
<tr>
<td>
<img id="d3"
src="Images/2.jpg"
width="300"
height="240"
/>
<div class="contenthover">
<h3>Hello</h3>
<p>This is test.</p>
<p><a href="#" class="mybutton">More...</a></p>
</div>
</td>
<td>
<img id="d4"
src="Images/1.jpg"
width="300"
height="240"
/>
<div class="contenthover">
<h3>Welcome</h3>
<p>This is test.</p>
<p><a href="#" class="mybutton">More...</a></p>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>