How To Show Hidden Content on Mouse Over on Top of Element using jQuery in c# .net

How To Show Hidden Content on Mouse Over on Top of Element using jQuery in c# .net

Program:

.Aspx File

<%@ 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/Hydrangeas.jpg" width="300" height="240" alt="demo" />
<div class="contenthover">
<h3>fantasyaspnet.blogspot.com</h3>
<p>Learn Asp.net</p>
<p><a href="http://fantasyaspnet.blogspot.in/" class="mybutton">Click Hear</a></p>
</div>
</td>
<td>
<img id="d2" src="Images/Jellyfish.jpg" width="300" height="240" alt="demo"/>
<div class="contenthover">
<h3>fantasyaspnet.blogspot.com</h3>
<p>Learn Asp.net</p>
<p><a href="http://fantasyaspnet.blogspot.in/" class="mybutton">Click Hear</a></p>
</div>
</td>
</tr>
<tr>
<td>
<img id="d3" src="Images/Jellyfish.jpg" width="300" height="240" alt="demo" />
<div class="contenthover">
<h3>fantasyaspnet.blogspot.com</h3>
<p>Learn Asp.net</p>
<p><a href="http://fantasyaspnet.blogspot.in/" class="mybutton">Click Hear</a></p>
</div>
</td>
<td>
<img id="d4" src="Images/Hydrangeas.jpg" width="300" height="240" alt="demo" />
<div class="contenthover">
<h3>fantasyaspnet.blogspot.com</h3>
<p>Learn Asp.net</p>
<p><a href="http://fantasyaspnet.blogspot.in/" class="mybutton">Click Hear</a></p>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

Aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
}

Demo:

How To Show Hidden Content on Mouse Over on Top of Element using jQuery in c# .net

Download Demo

Asp.Net

Pages

Wednesday, 22 May 2013

How To Show Hidden Content on Mouse Over on Top of Element using jQuery in c# .net

No comments:

Post a Comment