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

I was a little unhappy with the initial 3x3 puzzle having to use arrows to indicate which slide could be moved to the vacant space. This is not how JS/jQuery versions work.

So I have restyled this version so that all you need to do is click/tap the tile you want to move.

This makes use of :not(:has(:checked)) together with :has(:checked) to decide which tiles can be moved to the vacant space. Just taking 24 lines of CSS styles to do the calculations.

The controls are now simpler and the object of the puzzle is to re-arrange the pieces back into their right places.

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">.