jQuery Show Hidden Content on MouseOver on Top of Element

By: Suresh Dasari 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

<head>

<title>jQuery ContentHover Plugin Examples</title>

$(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>

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>

<table>

<tr>

<td>

<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>

<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>

<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>

<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