No javascript or jQuery, just HTML and CSS to produce this slide puzzle.

This is a CSS version of a 3 x 3 slide puzzle. The controls are simple and the object of the puzzle is to re-arrange the pieces back into their right places.

To move a piece just click/tap the green arrow shown on the 'free' side of the piece you want to move. This will move the piece to the free space.

Once all the pieces are back into their correct position you will see the whole image (including the missing bottom right corner piece) and a 'Congratulations' message.

The 'blank' square will show a faint image of the correct piece in that square.

You can also change the image used in the puzzle by clicking/tapping any of the four images above the puzzle.

The CSS makes extensive use of :has() and & and also the use of content: to change the content of the faint image <img alt="" title="" id="back">.