CSS-move the mouse up to display a large image

Final Effect

-------------------------------------------------- CSS section -----------------------------------

# Demo {overflow: hidden; text-align: center; padding: 10px ;}
# Demo IMG {border: none; Border: 5px solid # f4f4f4}
# Enlarge_images {position: absolute; display: none; Z-index: 1; Border: 5px solid # f4f4f4}

-------------------------------------------------- Page section -----------------------------------

<Div id = "Demo" class = "k_bg_demo">

</div> <Div id =" enlarge_images ">

</Div>

-------------------------------------------------- JS part -----------------------------------

VaR demo = Document. getelementbyid ("Demo ");
VaR Gg = demo. getelementsbytagname ("IMG ");
VaR Ei = Document. getelementbyid ("enlarge_images ");
For (I = 0; I <GG. length; I ++ ){
VaR Ts = Gg [I];
TS. onmousemove = function (event ){
Event = event | window. event;
EI. style. Display = "Block ";
EI. innerhtml = ' ';
EI. style. Top = Document. Body. scrolltop + event. clienty + 10 + "PX ";
EI. style. Left = Document. Body. scrollleft + event. clientx + 10 + "PX ";
}
TS. onmouseout = function (){
EI. innerhtml = "";
EI. style. Display = "NONE ";
}
TS. onclick = function (){
Window. Open (this. SRC );
}
}

NOTE: If there are multiple images on the page to apply this effect, you can use this JSCodeAdd a loop

If there are two images on the page to apply this effect

<Div id = "demo0" class = "k_bg_demo">

</div> <Div id =" enlarge_images ">

</Div>

<Div id = "demo1" class = "k_bg_demo">

</div> <Div id =" enlarge_images ">

</Div>

The JS part is changed:
For (var j = 0; j <8; j ++ ){

JS Code

VaR demo = Document. getelementbyid ("Demo" + J );

}