• NB/Coul2

    Même principe mais avec 6 images en 16/9.

    Le survol colore les vignettes et le clic dessus affiche la grande image; un second clic dessus pour revenir au montage.


    <div style="width: 60vw; height: 24vw; margin: 0.1vh auto; border: 0.2vh solid grey; text-align: left; background: linear-gradient(to bottom, #088A68 0%, #00FFBF 100%);"><input id="abc1" class="abc" src="http://ekladata.com/5gsj21g9Xz48XbwEBAz_R4frC7M@307x173.jpg" type="image" /> <input id="abc2" class="abc" src="http://ekladata.com/eCmm6XY2ZX6MVW2l3RW1M8OqY1Y@307x173.jpg" type="image" /> <input id="abc3" class="abc" src="http://ekladata.com/yQ8wqi2B7LbfRaIZ4Rs-YfTXQic@307x173.jpg" type="image" /> <input id="abc4" class="abc" src="http://ekladata.com/onBsglJ429S34XMU9RagJ0ZaBsE@307x173.jpg" type="image" /> <input id="abc5" class="abc" src="http://ekladata.com/iiKDL1FXE2AlkEeUhOzM1xWjhD0@307x173.jpg" type="image" /> <input id="abc6" class="abc" src="http://ekladata.com/2M8HwVB04LFtDGJ00_y8bc9PjaM@307x173.jpg" type="image" /> <img id="bcd1" class="bcd" src="http://ekladata.com/5gsj21g9Xz48XbwEBAz_R4frC7M.jpg" alt="" /> <img id="bcd2" class="bcd" src="http://ekladata.com/eCmm6XY2ZX6MVW2l3RW1M8OqY1Y.jpg" alt="" /> <img id="bcd3" class="bcd" src="http://ekladata.com/yQ8wqi2B7LbfRaIZ4Rs-YfTXQic.jpg" alt="" /> <img id="bcd4" class="bcd" src="http://ekladata.com/onBsglJ429S34XMU9RagJ0ZaBsE.jpg" alt="" /> <img id="bcd5" class="bcd" src="http://ekladata.com/iiKDL1FXE2AlkEeUhOzM1xWjhD0.jpg" alt="" /> <img id="bcd6" class="bcd" src="http://ekladata.com/2M8HwVB04LFtDGJ00_y8bc9PjaM.jpg" alt="" /></div>

    <style><!--
    .abc{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; -webkit-filter:grayscale(1) brightness(0.5);}
    .bcd{position:absolute; z-index:100; width:0vw; height:0vw; border-radius:50%; left:50vw; top:25vw; transition:all 1.5s linear;}
    #abc1{transform:translate(3.5vw,2vw);}
    #abc2{transform:translate(21.5vw,2vw);}
    #abc3{transform:translate(39.5vw,2vw);}
    #abc4{transform:translate(3.5vw,13vw);}
    #abc5{transform:translate(21.5vw,13vw);}
    #abc6{transform:translate(39.5vw,13vw);}

    #abc1:hover,#abc2:hover,#abc3:hover,#abc4:hover,#abc5:hover,#abc6:hover{-webkit-filter:grayscale(0) brightness(1);}
    #abc1:focus ~ #bcd1,#abc2:focus ~ #bcd2,#abc3:focus ~ #bcd3,#abc4:focus ~ #bcd4,#abc5:focus ~ #bcd5,#abc6:focus ~ #bcd6{width:100vw; height:56.25vw; border-radius:0%; left:0; top:0;}
    --></style>