Clic simple

Nous avons vu un code pour un changement d'image au survol, regardons le même principe au clic.

Un inconvénient du clic est qu'il faut ajouter un bouton (X) pour le retour car, une fois cliqué, le montage ne bouge plus.

<p style="width: 800px; height: 450px; margin: 5px auto; border: 5px solid white; box-shadow: 4px 4px 6px black;"><img id="clc1" src="https://ekladata.com/ggwxA30dorgW_2yfJB-Y-RiaBpw.jpg" alt="" /> <input id="clc2" type="text" /> <input id="clc3" type="text" value="X" /></p>

<style><!--
#clc1{position:absolute; z-index:1; width:800px; height:450px;}
#clc2{position:absolute; z-index:2; width:800px; height:450px; background:url('https://ekladata.com/VWkGSNM6zkq-9ziwOkQbn_cW8yY.jpg'); background-size:800px 450px; opacity:1; transition:all 1s linear;}
#clc2:focus{opacity:0;}
#clc3{position:absolute; z-index:3; width:15px; height:15px; font-size:20px; color:red!important; transform:translate(780px,0px);}
--></style>

clic1:image en fond; clc2: image au dessus, visible et qui devient transparente au clic; clc3: bouton de retour (un clic hors montage a le même effet).