Introduction:
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 asp.net.
Description:
In previous articles I explained Global.aspx file events in asp.net, Send Gridview as email body in asp.net, Send email using gmail account in asp.net, jQuery Bouncing Menu Example and many articles relating to jQuery, asp.net. Now I will explain how to Show hidden content on top of element when mouse hovers over it using jQuery content hover plugin in asp.net.
In previous articles I explained Global.aspx file events in asp.net, Send Gridview as email body in asp.net, Send email using gmail account in asp.net, jQuery Bouncing Menu Example and many articles relating to jQuery, asp.net. Now I will explain how to Show hidden content on top of element when mouse hovers over it using jQuery content hover plugin in asp.net.
To
implement this we need to write the code like as shown below
<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>Aspdotnet-Suresh.Com</h3>
<p>It
offers many articles relating to Asp.net, C#, SQL Server, Web Services, WCF,
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>Aspdotnet-Suresh.Com</h3>
<p>It
offers many articles relating to Asp.net, C#, SQL Server, Web Services, WCF,
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>Aspdotnet-Suresh.Com</h3>
<p>It
offers many articles relating to Asp.net, C#, SQL Server, VB.NET, 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>Aspdotnet-Suresh.Com</h3>
<p>It
offers many articles relating to Asp.net, C#, SQL Server, Web Services, WCF,
AJAX, XML, JavaScript, JQuery, Gridview articles.</p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
|
If
you observe above code I added some of script files in header section by using those
files we can implement content hover functionality for required controls. If
you want code files you can get from attached folder or you can get it from
this site Content Hover Plugin
Demo
|
Download Sample Code Attached
For live demo and for more information about this plugin check this Content Hover Plugin
For live demo and for more information about this plugin check this Content Hover Plugin
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
2 comments :
dsdsds
Good for beginners