CSS allows you to move the cursor up to display the large image.

-------------------------------------------------- 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 you want to apply this effect to multiple images on the page, add a loop to the js Code.

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 );

}

<Style> # 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} </style> <p id = "demo">    </p> <div id =" enlarge_images "> </div> <script> 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) ;}}</script> <br/> <center> If the result cannot be displayed, press Ctrl + F5 to refresh the page. For more page code: <a href =' http://www.bkjia.com/ 'Target = '_ blank'> http://www.bkjia.com/ </A> </center>

Tip: the code can be modified before running!