Here I will explain how to show hide content on
mouseover using jQuery content hover plugin or Show
hidden content on top of element when mouse hovers over it using jQuery content hover plugin in
Designer Source Code
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>jitendragangwar007.blogspot.in</h3>
<p>It offers many articles relating to Asp.net, C#,
SQL Server, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>
<p><a href="#" class="mybutton">Lorem
ipsum</a></p>
</div>
</td>
<td>
<img id="d2" src="Images/2.jpg" width="300" height="240"/>
<div class="contenthover">
<h3>jitendragangwar007.blogspot.in</h3>
<p>It offers many articles relating to Asp.net, C#,
SQL Server, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>
<p><a href="#" class="mybutton">Lorem
ipsum</a></p>
</div>
</td>
</tr>
<tr>
<td>
<img id="d3" src="Images/2.jpg"
width="300"
height="240"
/>
<div class="contenthover">
<h3>jitendragangwar007.blogspot.in</h3>
<p>It offers many articles relating to Asp.net, C#,
SQL Server, jQuery, JavaScript, XML, html, css. </p>
<p><a href="#" class="mybutton">Lorem
ipsum</a></p>
</div>
</td>
<td>
<img id="d4" src="Images/1.jpg"
width="300"
height="240"
/>
<div class="contenthover">
<h3>jitendragangwar007.blogspot.in</h3>
<p>It offers many articles relating to Asp.net, C#,
SQL Server, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>
<p><a href="#" class="mybutton">Lorem
ipsum</a></p>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment