Montage tag4

Sur le même principe d'une image de premier plan, modifiée par un filtre the Gimp, au dessus d'une image, invisible au départ.
Le survol de l'image modifiée l'a fait devenir transparente tandis que celle du fond devient opaque.

Code:
<div id="fd">
<p id="tg1">&nbsp;</p>
<p id="tg2">&nbsp;</p>
</div>

<style type="text/css"><!--
#fd{position:relative; width:800px; height:600px; margin:5px auto; border:6px ridge white; background:url('http://ekladata.com/HGfR3og9XoQZPJSJchvvLUQPcZY/img687.jpg'); background-size:cover;}
#tg1{ transition:all 2s linear 0s;position:absolute; z-index:5; width:800px; height:600px; background:url('http://ekladata.com/pz7rHnmyn4Ba80-v7-eJ2Rd5e2Q/6507tr.gif'); opacity:1;}
#tg2{transition:all 2s linear 0s; position:absolute; z-index:4; width:800px; height:600px; background:url('http://ekladata.com/s1L4zd3B5v6_a-b7WGsiRH84EZ0/6507.jpg'); opacity:0;}
#tg1:hover{opacity:0;}
#tg1:hover ~ #tg2{opacity:1;}
--></style>
...
...