Demande 1

Clic sur le rond central puis survol des vignettes.

Image en 600x600px et montage en 800x800px; cette variante oblige à suivre un peu la vignette à l'agrandissement.

<div style="width: 800px; height: 800px; margin: 10px auto;"><input id="cat" type="text" />
<p id="c1">&nbsp;</p>
<p id="c2">&nbsp;</p>
<p id="c3">&nbsp;</p>
<p id="c4">&nbsp;</p>
</div>

<style><!--
#cat{position:absolute; z-index:4; width:600px; height:600px; border:none; transform:translate(100px,100px); border-radius:50%; background:url('http://ekladata.com/3Kma5F9Ha7-ocqqZ3vDGwp6wMnE.jpg'); box-shadow:inset 6px 6px 10px white, inset -6px -6px 10px black;}
#c1{position:absolute; z-index:1; width:180px; height:180px; border-radius:50%; background:url('http://ekladata.com/VzJWCqX3l5gQT1KsIJfH45uCg_A.jpg'); background-size:cover; margin:300px 0 0 300px; transition:all 1s linear; box-shadow:inset 6px 6px 10px white, inset -6px -6px 10px black;}
#c2{position:absolute; z-index:1; width:180px; height:180px; border-radius:50%; background:url('http://ekladata.com/Quq7zzmmT-mo8W1znC7S7Osd7f0.jpg'); background-size:cover; margin:300px 0 0 300px; transition:all 1s linear; box-shadow:inset 6px 6px 10px white, inset -6px -6px 10px black;}
#c3{position:absolute; z-index:1; width:180px; height:180px; border-radius:50%; background:url('http://ekladata.com/zCc7fwI8XtE4GmB2KxdxnNf-1J0.jpg'); background-size:cover; margin:300px 0 0 300px; transition:all 1s linear; box-shadow:inset 6px 6px 10px white, inset -6px -6px 10px black;}
#c4{position:absolute; z-index:1; width:180px; height:180px; border-radius:50%; background:url('http://ekladata.com/ArLmvgoftHlbUjOoxS7yyVqk1H8.jpg'); background-size:cover; margin:300px 0 0 300px; transition:all 1s linear; box-shadow:inset 6px 6px 10px white, inset -6px -6px 10px black;}
#cat:focus ~ #c1{z-index:5; margin:35px 0 0 35px;}
#cat:focus ~ #c2{z-index:5; margin:40px 0 0 590px;}
#cat:focus ~ #c3{z-index:5; margin:590px 0 0 40px;}
#cat:focus ~ #c4{z-index:5; margin:585px 0 0 590px;}
#c1:hover{width:600px; height:600px; transform:translate(70px,70px);}
#c2:hover{width:600px; height:600px; transform:translate(-500px,70px);}
#c3:hover{width:600px; height:600px; transform:translate(70px,-500px);}
#c4:hover{width:600px; height:600px; transform:translate(-500px,-500px);}
--></style>