<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#centerimage").live("click", function() {
console.log("Show cart Clicked .....");
$("#LoginContainer").show("slow");
//$("#LoginContainer").slideDown("slow");
});
</script>
</header>
<body>
<div id="centerimage" style="width:200px; height:200px; border-style: solid; text-align:center;<br mode=" hold=" /> border-width: 2px;margin:20% auto;">
has a centered image
</div>
<div id="LoginContainer" style="display:none;width:800px;height:400px; border-style: solid; text-align:center;<br mode=" hold=" /> border-width: 2px;margin:-40% auto;">
The div Emereged/Zoomed/Showed
</div>
</body>
<html>