Filtre2

Variante avec le filtre "invert".

SURVOL

<div style="width: 1000px; height: 563px; margin: 30px auto; border: 3px ridge grey; text-align: left; background: url('http://ekladata.com/UKBuyxolmGST_jOiIrHOVIrmiSk.jpg'); background-size: cover;"><img id="sec1" class="sec" src="http://ekladata.com/JpE09kKhUiD6vBprh1uJXAFm7Zc.jpg" alt="" /> <img id="sec2" class="sec" src="http://ekladata.com/0sTSrbBYmlUy-FLhy8LuL_gVjCg.jpg" alt="" /> <img id="sec3" class="sec" src="http://ekladata.com/Br4GOv2EAkFPMgvmm7WnPcLBlXw.jpg" alt="" /> <img id="sec4" class="sec" src="http://ekladata.com/rmweZ1N5g7vtAzMkTrTh0j05EUo.jpg" alt="" /> <img id="sec5" class="sec" src="http://ekladata.com/SNL4P_2MPS9ze1H6FRqAqn0b27c.jpg" alt="" /> <img id="sec6" class="sec" src="http://ekladata.com/udhYuyau9Oc5k3jRWMZ-we9kOXE.jpg" alt="" />
<p id="sec0">SURVOL</p>
</div>
<style><!--
#sec0{position:absolute; z-index:1; width:160px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(380px,30px);}
.sec{position:absolute; z-index:1;  width:160px; height:90px; border:3px solid white; transition:all 1s 0s, filter 2s 1.5s;}
#sec1{box-sizing:border-box; transform:translate(800px,30px); filter:invert(0);}
#sec2{box-sizing:border-box; transform:translate(800px,220px); filter:invert(0);}
#sec3{box-sizing:border-box; transform:translate(800px,410px); filter:invert(0);}
#sec4{box-sizing:border-box; transform:translate(600px,30px); filter:invert(0);}
#sec5{box-sizing:border-box; transform:translate(600px,220px); filter:invert(0);}
#sec6{box-sizing:border-box; transform:translate(600px,410px); filter:invert(0);}
#sec1:hover,#sec2:hover,#sec3:hover,#sec4:hover,#sec5:hover,#sec6:hover{z-index:5; filter:invert(1); width:1000px; height:563px; transform:translate(0px,0px);}
--></style>