How to design a grid(like a chessboard) of pictures in html with a property that the content of an individual cell covers the entire grid on onmouseover and again it comes back to its place i.e the cell on onmouseout?

I think one way is to have an extra image displayed as none. On mouseover, execute a function to display the image, but update its source of that image you just finished mousing over.

I have a simliar example you can look at. The difference here is the position of the bigger image. You want it to cover the grid rather than off to the side.

Simple JavaScript Image Thumbnail Viewer

If you hover over the thumnail, the larger image's src is updated to that of the image you hovered over.

This can also be done without javascript, using CSS. It can also be done via the jQuery library.