Position fond2

Autre animation avec clip-path:circle dans cet exemple ; l'inconvénient est que la sélection ne peut être décorée facilement car est comme une découpe aux ciseaux; par contre, elle permet des formes variées.

<div style="width: 800px; height: 450px; border: 4px ridge white; margin: 30px auto; text-align: left;"><img id="nb" src="http://ekladata.com/RE-F9RsqbK5bQ5w28QqY38izytg.jpg" alt="" /> <img id="sel" src="http://ekladata.com/RE-F9RsqbK5bQ5w28QqY38izytg.jpg" alt="" /></div>
<style><!--
#nb{position:absolute;z-index:1; width:800px; height:450px; filter:grayscale(1); opacity:0.5;}
#sel{position:absolute; z-index:2; width:800px; height:450px; clip-path: circle(100px at 500px 250px); transition:all 2s;}
#sel:hover{clip-path: circle(1000px at 400px 225px);}
--></style>