Jquery LightBox example Using CSS

Title: JQuery LightBox Example And Plugin

Description:
In this post i will given how to create light box for image,content etc using jquery with CSS. We can also use JQuery light box plugin to do this kind of light box overlay.But here i just use simple jquery functions and some css properties to make light box.In the below example when we click on the image ,it will be display in light box as in below images.In this way we can create jquery lightbox using css and jquery

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a#Main").click(function () {
$("#lbDiv").show();
})
$("a#Sub").click(function () {
$("#lbDiv").hide();
})
})
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<a id="Main" href="#"><img src="Styles/munnar1.jpg" /></a>
<div id="lbDiv">
<h4>Munnar</h4>
<img src="Styles/munnar.png" style="margin-left:45px;" />
<p align="center">
<a id="Sub" href="#"><img src="Styles/images.jpg" /></a>
</p>
</div>
</asp:Content>

CSS for Div:

 #lbDiv {
 display:none;
 position:fixed;
 background:#CFFCCC;
 padding:10px 15px 10px 15px;
 top:150px;
 left:50%;
 margin-left:-250px;
 width:400px;
 z-index:999;
}

For Jquery Light Box Library Click on this