Thursday, 24 October 2013

jQuery Show Hidden Content on MouseOver on Top of Element


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