Art.21b.9.21

Même principe de noir et blanc à couleur.

CLIC

SURVOL

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: white;"><input id="chga1" class="chga" type="text" /> <input id="chga2" class="chga" type="text" /> <input id="chga3" class="chga" type="text" /> <input id="chga4" class="chga" type="text" /> <input id="chga5" class="chga" type="text" /> <input id="nb1" class="nb" type="text" />
<p id="cca1">CLIC</p>
<p id="cca2">SURVOL</p>
<img id="fda1" class="fda" src="http://ekladata.com/b4v6cga7y8nJbYjFEVWYkNyDOZY.jpg" alt="" /> <img id="fda2" class="fda" src="http://ekladata.com/7bcY-jQujB2J02Xs8CKaz7jZneA.jpg" alt="" /> <img id="fda3" class="fda" src="http://ekladata.com/tUFsI0mZKBduO3qiBQh-sakuQgc.jpg" alt="" /> <img id="fda4" class="fda" src="http://ekladata.com/GvnupiHAyS_9AcHeodIWWqODTMU.jpg" alt="" /> <img id="fda5" class="fda" src="http://ekladata.com/DY5bJrynWgaURoLch6HSI6rFr34.jpg" alt="" /></div>

<style><!--
.chga{position:absolute; z-index:10; width:20px; height:20px; background:#00FFFF!important;}
.chga:checked{background:coral!important;}
#chga1{transform:translate(20px,100px);}
#chga2{transform:translate(20px,150px);}
#chga3{transform:translate(20px,200px);}
#chga4{transform:translate(20px,250px);}
#chga5{transform:translate(20px,300px);}
#cca1{position:absolute; z-index:4; width:80px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(20px,20px); background:rgba(0,0,0,0.5);}
#cca2{position:absolute; z-index:4; width:120px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(850px,20px); background:rgba(0,0,0,0.5);}
.fda{position:absolute; z-index:1; width:1000px; height:562px; filter:grayscale(1); transition:all 1s;}
#fda1{z-index:3;}
#chga2:focus ~ #fda2,#chga3:focus ~ #fda3,#chga4:focus ~ #fda4,#chga5:focus ~ #fda5{z-index:5}
.nb{position:absolute; z-index:10; width:30px; height:30px; border-radius:50%; background:#00FFFF!important;}
#nb1{transform:translate(940px,100px);}
#nb1:hover ~ .fda{filter:grayscale(0);}
--></style>