• NB/Coul 3

    En changeant la forme des vignettes; clic pour ouvrir et pour fermer.

    <div style="width: 60vw; height: 8vw; border: 0.4vh ridge brown; margin: 1vh auto; text-align: left; background: linear-gradient(to bottom, #B45F04 0%, #FAAC58 100%);"><input id="tr1" src="http://ekladata.com/OAX5edSErn-3wfBGaVusQXyad3o@115x115.jpg" type="image" /> <input id="tr2" src="http://ekladata.com/2cgeSc-5B9DF2VKBPJCbfYpE_4c@115x115.jpg" type="image" /> <input id="tr3" src="http://ekladata.com/V2v4C18guUeIGwuhziP7rpD9Rpk@115x115.jpg" type="image" /> <input id="tr4" src="http://ekladata.com/X-R_lj0waveGCRX-NL6gaf5guGA@115x115.jpg" type="image" /> <input id="tr5" src="http://ekladata.com/Vdm8DybdVXvv_TUx4V4q26PE9Gs@115x115.jpg" type="image" /> <input id="tr6" src="http://ekladata.com/EuMVOZFjxtI-obafrW97tEFEhe8@115x115.jpg" type="image" /> <input id="tr7" src="http://ekladata.com/D1Nqluj2QuVVIMhUsjS8pIdMDF8@115x115.jpg" type="image" /> <input id="tr8" src="http://ekladata.com/D3rFikVmpsURj35Hy4InIO6854g@115x115.jpg" type="image" /> <input id="tr9" src="http://ekladata.com/qclcnxHYGwL1KN7zYpFRZJC0Ewk@115x115.jpg" type="image" /> <img id="orch1" class="orch" src="http://ekladata.com/OAX5edSErn-3wfBGaVusQXyad3o.jpg" alt="" /> <img id="orch2" class="orch" src="http://ekladata.com/2cgeSc-5B9DF2VKBPJCbfYpE_4c.jpg" alt="" /> <img id="orch3" class="orch" src="http://ekladata.com/V2v4C18guUeIGwuhziP7rpD9Rpk.jpg" alt="" /> <img id="orch4" class="orch" src="http://ekladata.com/X-R_lj0waveGCRX-NL6gaf5guGA.jpg" alt="" /> <img id="orch5" class="orch" src="http://ekladata.com/Vdm8DybdVXvv_TUx4V4q26PE9Gs.jpg" alt="" />
    <img id="orch6" class="orch" src="http://ekladata.com/EuMVOZFjxtI-obafrW97tEFEhe8.jpg" alt="" />
    <img id="orch7" class="orch" src="http://ekladata.com/D1Nqluj2QuVVIMhUsjS8pIdMDF8.jpg" alt="" />
    <img id="orch8" class="orch" src="http://ekladata.com/D3rFikVmpsURj35Hy4InIO6854g.jpg" alt="" />
    <img id="orch9" class="orch" src="http://ekladata.com/qclcnxHYGwL1KN7zYpFRZJC0Ewk.jpg" alt="" />
    </div>

    <style><!--
    #tr1{position:absolute; z-index:1; width:6vw; height:6vw; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0); clip-path: polygon(0 0, 0% 100%, 100% 0);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(2vw,1vw);}
    #tr2{position:absolute; z-index:1; width:12vw; height:6vw; -webkit-clip-path: polygon(50% 1%, 0% 100%, 100% 100%); clip-path: polygon(50% 1%, 0% 100%, 100% 100%);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(3vw,1vw);}
    #tr3{position:absolute; z-index:1; width:12vw; height:6vw; -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); clip-path: polygon(0 0, 50% 100%, 100% 0);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(10vw,1vw);}
    #tr4{position:absolute; z-index:1; width:12vw; height:6vw; -webkit-clip-path: polygon(50% 1%, 0% 100%, 100% 100%); clip-path: polygon(50% 1%, 0% 100%, 100% 100%);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(17vw,1vw);}
    #tr5{position:absolute; z-index:1; width:12vw; height:6vw; -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); clip-path: polygon(0 0, 50% 100%, 100% 0);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(24vw,1vw);}
    #tr6{position:absolute; z-index:1; width:12vw; height:6vw; -webkit-clip-path: polygon(50% 1%, 0% 100%, 100% 100%); clip-path: polygon(50% 1%, 0% 100%, 100% 100%);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(31vw,1vw);}
    #tr7{position:absolute; z-index:1; width:12vw; height:6vw; -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); clip-path: polygon(0 0, 50% 100%, 100% 0);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(38vw,1vw);}
    #tr8{position:absolute; z-index:1; width:12vw; height:6vw; -webkit-clip-path: polygon(50% 1%, 0% 100%, 100% 100%); clip-path: polygon(50% 1%, 0% 100%, 100% 100%);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(45vw,1vw);}
    #tr9{position:absolute; z-index:1; width:6vw; height:6vw; -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0); clip-path: polygon(0 0, 100% 100%, 100% 0);-webkit-filter:grayscale(1) brightness(0.5);transform:translate(52vw,1vw);}

    #tr1:hover,#tr2:hover,#tr3:hover,#tr4:hover,#tr5:hover,#tr6:hover,#tr7:hover,#tr8:hover,#tr9:hover{-webkit-filter:grayscale(0) brightness(1);}
    .orch{position:absolute; z-index:100; width:0vw; height:0vw; border-radius:50%; left:50vw; top:20vw; transition:all 1.5s linear;}
    #tr1:focus ~ #orch1,#tr2:focus ~ #orch2,#tr3:focus ~ #orch3,#tr4:focus ~ #orch4,#tr5:focus ~ #orch5,#tr6:focus ~ #orch6,#tr7:focus ~ #orch7,#tr8:focus ~ #orch8,#tr9:focus ~ #orch9{width:100vw; height:56.25vw; border-radius:0%; left:0; top:0;}
    --></style>