• NB/Couleur 4

    Survol des vignettes pour les agrandir et le colorer; clic pour afficher la grande iamge correspondante.clic pour la refermer.


    <div style="width: 60vw; height: 11vw; border: 0.4vh ridge grey; margin: 0.1vh auto; text-align: left; background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);">

    <input id="loro1" class="loro" src="http://ekladata.com/IqL3rpPWr8_OtahY7YQMxlWssU0@307x173.jpg" type="image" />

    <input id="loro2" class="loro" src="http://ekladata.com/N-_zR_33nU8b63L6lkMxcL0E0sk@307x173.jpg" type="image" />

    <input id="loro3" class="loro" src="http://ekladata.com/e1tZugsI8Gv6IlQ1wc-84bmJTzk@307x173.jpg" type="image" />

    <input id="loro4" class="loro" src="http://ekladata.com/xY4HBTU7HxZvbW6TwxzAJDpmAxo@307x173.jpg" type="image" />

    <input id="loro5" class="loro" src="http://ekladata.com/DboUzivKZt1jVHoFRaTHYjGsP50@307x173.jpg" type="image" />

    <input id="loro6" class="loro" src="http://ekladata.com/DuXm81jypBO5AxvpikSZ6Vd22Fk@307x173.jpg" type="image" />

    <input id="loro7" class="loro" src="http://ekladata.com/Qs7vxa1BHn4C6yhn-VLOAaRuvRE@307x173.jpg" type="image" />

    <input id="loro8" class="loro" src="http://ekladata.com/uiJm830McdU7oNM7aVqPmUHlczw@307x173.jpg" type="image" />
    <img id="lp1" class="lp" src="http://ekladata.com/IqL3rpPWr8_OtahY7YQMxlWssU0.jpg">
    <img id="lp2" class="lp" src="http://ekladata.com/N-_zR_33nU8b63L6lkMxcL0E0sk.jpg">
    <img id="lp3" class="lp" src="http://ekladata.com/e1tZugsI8Gv6IlQ1wc-84bmJTzk.jpg">
    <img id="lp4" class="lp" src="http://ekladata.com/xY4HBTU7HxZvbW6TwxzAJDpmAxo.jpg">
    <img id="lp5" class="lp" src="http://ekladata.com/DboUzivKZt1jVHoFRaTHYjGsP50.jpg">
    <img id="lp6" class="lp" src="http://ekladata.com/DuXm81jypBO5AxvpikSZ6Vd22Fk.jpg">
    <img id="lp7" class="lp" src="http://ekladata.com/Qs7vxa1BHn4C6yhn-VLOAaRuvRE.jpg">
    <img id="lp8" class="lp" src="http://ekladata.com/uiJm830McdU7oNM7aVqPmUHlczw.jpg">
    </div>

    <style><!--
    .loro{position:absolute; z-index:1; width:5vw; height:9vw; border-radius:1.5vw; -webkit-filter:grayscale(1); transition:all 0.5s linear;}
    #loro1{transform:translate(3vw,1vw);}
    #loro2{transform:translate(10vw,1vw);}
    #loro3{transform:translate(17vw,1vw);}
    #loro4{transform:translate(24vw,1vw);}
    #loro5{transform:translate(31vw,1vw);}
    #loro6{transform:translate(38vw,1vw);}
    #loro7{transform:translate(45vw,1vw);}
    #loro8{transform:translate(52vw,1vw);}
    #loro1:hover,#loro2:hover,#loro3:hover,#loro4:hover,#loro5:hover,#loro6:hover,#loro7:hover,#loro8:hover{z-index:10; -webkit-filter:grayscale(0); width:16vw;}
    #loro7:hover,#loro8:hover{transform:translate(42vw,1vw);}
    .lp{position:absolute; z-index:100; width:100vw; height:56.25vw; -webkit-filter:grayscale(1); transition:left 1s linear 0s, top 1s linear 0s, filter 1s linear 1s;}
    #lp1,#lp3,#lp5,#lp7{left:-100vw; top:0;}
    #lp2,#lp4,#lp6,#lp8{left:100vw; top:0;}
    #loro1:focus ~ #lp1,#loro2:focus ~ #lp2,#loro3:focus ~ #lp3,#loro4:focus ~ #lp4,#loro5:focus ~ #lp5,#loro6:focus ~ #lp6,#loro7:focus ~ #lp7,#loro8:focus ~ #lp8{left:0; top:0;-webkit-filter:grayscale(0);}
    --></style>