Display full image on mouse click and mouse use using javascript and filters

function doImageShow(vImg)
{
if (navigator.product != "Gecko")
document.getElementById('imgCon').filters.item(0).Apply();

document.getElementById('imgShow').setAttribute('src',vImg.src);
document.getElementById('imgShow').setAttribute('alt', 'Click the image to close.');
document.getElementById('imgCon').style.display = "";
var newImg = document.getElementById('imgShow');
if (self.innerWidth)
{
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
}
else if (document.documentElement &&document.documentElement.clientWidth)
{
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
}
else if (document.body)
{
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
}
else
{
frameWidth = screen.availWidth;
frameHeight = screen.availHeight;
}
iWidth = newImg.width;
iHeight = newImg.height;
if(iWidth == 0) iWidth = 500;
if(iHeight == 0) iHeight = 500;
imgPosLeft = frameWidth/2 - iWidth/2 + document.body.scrollLeft;
imgPosTop = frameHeight/2 - iHeight/2 + document.body.scrollTop;
document.getElementById('imgCon').style.position = "absolute";
document.getElementById('imgCon').style.left = imgPosLeft;
document.getElementById('imgCon').style.top = imgPosTop;
if (navigator.product != "Gecko")
document.getElementById('imgCon').filters.item(0).Play();
}
function doImageClear()
{//clear the image
document.getElementById('imgShow').removeAttribute('src');
document.getElementById('imgCon').style.display = "none";
}

place the above script in head section of html

Now place one div with syle as none, and one image with fixed width and height.
when you click on the image, the showPic function will call, which will resize your image to big one.

<div id="imgCon" style="display: none; z-index: 100;filter:progid:DXImageTransform.Microsoft.Fade(duration=0.7);
        left: 10px; overflow: auto; position: absolute; top: 10px">
        <div class="closeLnk" onclick="doImageClear();">
            close</div>
        <div id="picLibImgHolder">
           <img class="imageStyle" class="galleryImg" id="imgShow" style="cursor: pointer" onclick="doImageClear();"
                border="0" name="imgShowN"></div>
    </div>

<img class="imageStyle" src="/PublishingImages/CFMR.jpg" width='100' height='80' id="imgCF" onclick="javascript:return showPic(this);"  />