Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show Hidden Content on MouseOver on Top of Element

Jan 31, 2013
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

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
 

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 RSS subscribe by email Subscribe by Email

3 comments :

Anonymous said...

dsdsds

Anonymous said...

Good for beginners

Sri Kumarans School said...

its not working if implement this in a content page. please help.

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.