Position fond

Une même image en fond et en noir et blanc et, par dessus, la même en couleur dont on sélectionne une partie circulaire avec bordure ou ombre 3D, à survoler.

Cette écriture ne permet que des sélections géométriques; voir page suivante pour d'autres formes.

<div style="width: 800px; height: 450px; border: 1px ridge black; margin: 30px auto; text-align: left;">
<p id="nb">&nbsp;</p>
<p id="sel">&nbsp;</p>
</div>
<style><!--
#nb{position:absolute;z-index:1; width:800px; height:450px; background:url('http://ekladata.com/RE-F9RsqbK5bQ5w28QqY38izytg.jpg'); background-size:800px 450px; filter:grayscale(1); opacity:0.5;}
#sel{position:absolute;z-index:2; width:200px; height:200px; border-radius:50%; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black; background:url('http://ekladata.com/RE-F9RsqbK5bQ5w28QqY38izytg.jpg'); background-size:800px 450px; background-position:-400px -150px; transform:translate(400px,150px); transition:all 1s;}
#sel:hover{width:800px; height:450px; border-radius:0%; background-position:0px 0px; transform:translate(0px,0px);}
--></style>