Filtres

Remplacez mes 5 adresses images par les vôtres.

De préférence, clic d'abord puis survol bouton correspondant.

<div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 2vh auto; background: url('http://ekladata.com/9lFPlvPMYfqA9nDKRUNhC0f0Q00.jpg'); background-size: cover;"><input id="g1" class="gr" type="text" value="1" /><input id="g2" class="gr" type="text" value="2" /><input id="g3" class="gr" type="text" value="3" /><input id="g4" class="gr" type="text" value="4" /><input id="g5" class="gr" type="text" value="5" /> <input id="s1" class="gr" type="text" value="A" /><input id="s2" class="gr" type="text" value="B" /><input id="s3" class="gr" type="text" value="C" /><input id="s4" class="gr" type="text" value="D" /><input id="s5" class="gr" type="text" value="E" />
<p id="cl">Clic</p>
<p id="surv">Survol</p>
<p id="nb1">&nbsp;</p>
<p id="nb2">&nbsp;</p>
<p id="nb3">&nbsp;</p>
<p id="nb4">&nbsp;</p>
<p id="nb5">&nbsp;</p>
<p id="coul1">&nbsp;</p>
<p id="coul2">&nbsp;</p>
<p id="coul3">&nbsp;</p>
<p id="coul4">&nbsp;</p>
<p id="coul5">&nbsp;</p>
</div>

<style><!--
.gr{position:absolute; z-index:10; font-size:2vw; color:white!important; text-align:center; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);}
#g1{width:2vw; transform:translate(0vw,5vw);}
#g2{width:2vw; transform:translate(0vw,8vw);}
#g3{width:2vw; transform:translate(0vw,11vw);}
#g4{width:2vw; transform:translate(0vw,14vw);}
#g5{width:2vw; transform:translate(0vw,17vw);}
#cl{position:absolute; z-index:10; width:4vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); transform:translate(0vw,0vw);}
#surv{position:absolute; z-index:10; width:7vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); transform:translate(53vw,0vw);}
#s1{width:2vw; transform:translate(57.5vw,5vw);}
#s2{width:2vw; transform:translate(57.5vw,8vw);}
#s3{width:2vw; transform:translate(57.5vw,11vw);}
#s4{width:2vw; transform:translate(57.51vw,14vw);}
#s5{width:2vw; transform:translate(57.5vw,17vw);}

#nb1{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/5DnJ75MfXBdg24fqdpp61SICtq8.jpg'); background-size:cover; webkit-filter:grayscale(1);filter:grayscale(1); opacity:0;}
#nb2{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/cmDcrkJvJQ4pFszhdZi9vrFCOks.jpg'); background-size:cover; webkit-filter:grayscale(1);filter:grayscale(1); opacity:0;}
#nb3{position:absolute; z-index:2; width:60vw; height:3.75vw; background:url('http://ekladata.com/3e5eWbElzmBK30cEUU5ermumhSs.jpg'); background-size:cover; webkit-filter:grayscale(1);filter:grayscale(1); opacity:0;}
#nb4{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/5UNTtoMqVOMszytqC5CASLf9ffU.jpg'); background-size:cover; webkit-filter:grayscale(1);filter:grayscale(1); opacity:0;}
#nb5{position:absolute; z-index:2; width:60vw; height:33.75vw; background:url('http://ekladata.com/68ahtksCR7zIxp2x5OSkYFEY6B4.jpg'); background-size:cover; webkit-filter:grayscale(1);filter:grayscale(1); opacity:0;}
#coul1{position:absolute; z-index:2; width:0vw; height:33.75vw; background:url('http://ekladata.com/5DnJ75MfXBdg24fqdpp61SICtq8.jpg'); background-size:cover; opacity:0; transform:translate(0vw,0vw); transition:all 2s linear;}
#coul2{position:absolute; z-index:2; width:0vw; height:33.75vw; background:url('http://ekladata.com/cmDcrkJvJQ4pFszhdZi9vrFCOks.jpg'); background-size:cover; opacity:0; background-position: -59.99vw 0vw; transform:translate(60vw,0vw); transition:all 2s linear;}
#coul3{position:absolute; z-index:2; width:60vw; height:0vw; background:url('http://ekladata.com/3e5eWbElzmBK30cEUU5ermumhSs.jpg'); background-size:cover; opacity:0;transform:translate(0vw,0vw); transition:all 2s linear;}
#coul4{position:absolute; z-index:2; width:60vw; height:0vw; background:url('http://ekladata.com/5UNTtoMqVOMszytqC5CASLf9ffU.jpg'); background-size:60vw 33.75vw; opacity:0; background-position: 0vw -33.74vw; transform:translate(0vw,33.75vw); transition:all 2s linear;}
#coul5{position:absolute; z-index:2; width:0vw; height:0vw; background:url('http://ekladata.com/68ahtksCR7zIxp2x5OSkYFEY6B4.jpg'); background-size:60vw 33.75vw; background-position: -30vw -16.75vw; opacity:0; transform:translate(30vw,16.75vw); transition:all 2s linear;}
#g1:focus ~ #nb1,#g2:focus ~ #nb2,#g3:focus ~ #nb3,#g4:focus ~ #nb4,#g5:focus ~ #nb5,#s1:hover ~ #coul1,#s2:hover ~ #coul2,#s3:hover ~ #coul3,#s4:hover ~ #coul4,#s5:hover ~ #coul5{opacity:1; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
--></style>