Au coin !

En réalisant ce montage, je me suis rendu compte que le changement d'image n'est pas progressif, comme il l'est pour un changement de couleur; je vais donc essayer un autre code mais je vous propose déjà celui-là.

<div id="a1"><input id="b1" type="text" /> <input id="c1" type="text" /> <input id="d1" type="text" /><span id="b2">&nbsp;</span><span id="f1">Clic sur l'image pour l'animer.</span></div>
<style><!--
#a1{position:relative; width:1000px; height:600px; margin:5px auto; border:4px ridge grey; background:url(http://ekladata.com/Bc0XtTT2X6FIuDpwNsE6F8sjMhc/ck-69.jpg);}
#b1{position:absolute; z-index:10; width:400px; height:300px; transform:translate(0px,0px); border:0px; background:transparent;}
#c1{position:absolute; z-index:1; width:400px; height:300px; transform:translate(600px,300px);border:0px; background:transparent;}
#d1{position:absolute; z-index:1; width:400px; height:300px; transform:translate(0px,300px);border:0px; background:transparent;}
#f1{position:absolute; z-index:1; transform:translate(400px,250px); width:200px; text-align:center; font-size:20pt; color:white; text-shadow:1px 1px black;}
#b2{position:absolute; z-index:2; transition:transform 2s linear, background 2s linear; width:400px; height:300px; transform:translate(0px,0px); background:url(http://ekladata.com/LQ952VBbPeuqV8HTxE4wWIgjh0Q/983.jpg);}

#b1:focus ~ #b2{ transform:translate(600px,300px); background:url(http://ekladata.com/0E_XZ9sTaE2xX6QRno3cG6TPTjc/984.jpg);}
#b1:focus ~ #c1{ z-index:10;}
#c1:focus ~ #b2{ transform:translate(0px,300px); background:url(http://ekladata.com/KKGMBi4mhG38dMn3ejyBRjKzXnw/985.jpg);}
#c1:focus ~ #d1{ z-index:10;}
#d1:focus ~ #b2{ transform:translate(600px,0px); background:url(http://ekladata.com/hBISc-P5dGwLPG4spwYXa9YJzCo/986.jpg);}
--></style>

<div id="a51"><input id="a61" type="text" /><input id="a71" type="text" /><input id="a81" type="text" /><input id="a91" type="text" /> <span id="a62">&nbsp;</span><span id="a72">&nbsp;</span><span id="a82">&nbsp;</span><span id="a92">&nbsp;</span></div>
<style><!--
#a51{position:relative; width:800px; height:600px; margin:5px auto; border:4px ridge grey; background:url(http://ekladata.com/zmAXeJ38JO4TC1ZCYlLnUOceKdw/00007.jpg);}
#a61{position:absolute; z-index:10; width:400px; height:300px; transform:translate(0px,0px); border:0px; background:transparent;}
#a71{position:absolute; z-index:10; width:400px; height:300px; transform:translate(400px,300px); border:0px; background:transparent;}
#a81{position:absolute; z-index:10; width:400px; height:300px; transform:translate(0px,300px); border:0px; background:transparent;}
#a91{position:absolute; z-index:10; width:400px; height:300px; transform:translate(400px,0px); border:0px; background:transparent;}

#a62{position:absolute; z-index:2; transition: all 1s linear; width:400px; height:300px; transform:translate(0px,0px) ; opacity:1; background:url(http://ekladata.com/soM7rLfXmFBtooA3ux7vXjJlp3c/894.jpg);}
#a72{position:absolute; z-index:2; transition: all 1s linear; width:400px; height:300px; transform:translate(400px,300px); opacity:0; background:url(http://ekladata.com/qojWTt6dJo5uV5u1Jd-vP-Ar40g/901.jpg);}
#a82{position:absolute; z-index:2; transition: all 1s linear; width:400px; height:300px; transform:translate(0px,300px); opacity:0; background:url(http://ekladata.com/oXfUr5cHaLKaquH-y6VAwXTDiAw/903.jpg);}
#a92{position:absolute; z-index:2; transition: all 1s linear; width:400px; height:300px; transform:translate(400px,0px); opacity:0; background:url(http://ekladata.com/L66x6hOG2D4-IxooFGoy36ByHNs/906.jpg);}

#a61:focus ~ #a62{ opacity:0;}
#a61:focus ~ #a72{ opacity:1;}

#a71:focus ~ #a62{ opacity:0;}
#a71:focus ~ #a72{ opacity:0;}
#a71:focus ~ #a82{ opacity:1;}

#a81:focus ~ #a62{ opacity:0;}
#a81:focus ~ #a82{ opacity:0;}
#a81:focus ~ #a92{ opacity:1;}

#a91:focus ~ #a62{ opacity:1;}
#a91:focus ~ #a92{ opacity:0;}
--></style>