Add an 'X' button to the rescaled image link for easier navigation

[lSabrinel]

Observation:
A rescaled image in a Sphinx project links to the full-size image, which is useful, but returning to the previous page is a bit inconvenient.

Improvement:
I suggest adding a small 'X' button to close the image and return to the page.

Workaround:
For now, I am working on overriding the CSS to create the button.

Behavior:
I apologize that I can't show you the real project I am working on, but this is a sample project.
The image behavior is the same.
When you click on the image, it directs you to the link shown below.

2024-08-23-10-35-20.mp4

Code:
.. image:: ../../source/_static/images/car1.jpg :scale: 80%

[electric-coder]

Can you edit the question to include a minimal reproducible example?

It seems I have lots of images in my project but none of them are by themselves clickable, so I want to know exactly how you include such an image.

[lSabrinel]

Hello @electric-coder,
I have edited the question to include a short video showing the image behavior, as well as the Sphinx directive and its rescale option.

[electric-coder]

@lSabrinel I understand the problem you describe now. I haven't searched previous Sphinx issues for a solution, nor SO's python-sphinx tag but there might already be an extension that adds the "back" functionality for the image.

[SilverRainZ]

Have you tried https://sphinxcontrib-images.readthedocs.io/en/latest/?

[lSabrinel]

Hello @electric-coder indeed there is a solution, and the key is to use the sphinxcontrib-images extension and the Thumbnail directive.
Thanks to @SilverRainZ , who pointed out the solution. It worked as intended and even offers additional interesting options.