jQuery photo resizing effect does not affect the layout of other elements_jquery

I saw this kind of special effect on the Internet before, but unfortunately I didn’t save the URL at the time, so I didn’t know how this special effect was achieved. I deliberately searched the Internet today, and sure enough, I found it.

I also tried hard and tried to write:

But it was just a simple enlargement of the image, and it also affected the layout of the elements around the image (because the enlargement of the image takes up more space).

Later I found that the purpose can be achieved by using the overflow and position attributes flexibly and skillfully. In fact, I think overflow and position (incidentally top, bottom, left, right) in CSS (CSS3) are simply an unsolvable combination for web page special effects. Of course, js (jquery) is the boss.

After talking so much nonsense, everyone must still be confused: What kind of special effect is this? Alas, my language expression ability is still very average. I will take a screenshot to illustrate it below:

This is the initial appearance of the web page when it is opened:

When the mouse is hovering above 6 When you click on any of the pictures, the special effects I mentioned will appear (here I put the mouse on the third picture as an example):

You will find that the picture is shrunk, and when the mouse is placed When you open the picture, it feels like it has been enlarged again (returned to the initial state), without the phenomenon of picture overflow, and it does not affect the layout of other pictures and elements.

The code is posted below:

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">

< div class="pic">

< /div>