• Diapo 3 clic

    Une variante avec fort peu de modification dans le code; clic sur chaque image.

    <div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.4vh ridge white;"><input id="ph0" type="text" /><input id="ph1" type="text" /><input id="ph2" type="text" /><input id="ph3" type="text" /><input id="ph4" type="text" /><input id="ph5" type="text" /><input id="ph6" type="text" /></div>

    <style><!--
    #ph0{position:absolute; z-index:5; width:80vw; height:92vh; background:url('http://ekladata.com/OYb7eNOlu_Phr5VyKDpvZjW5dM8.jpg'); background-size:cover; transition:all 0.5s linear;}
    #ph1{position:absolute; z-index:2; width:0vw; height:0vh; border-radius:50%; transform:translate(40vw,46vh); background:url('http://ekladata.com/XNzOS2O47utye-esOhWM921Pah8.jpg'); background-size:cover; transition:all 2s linear;}
    #ph2{position:absolute; z-index:2; width:0vw; height:0vh; border-radius:50%; transform:translate(40vw,46vh); background:url('http://ekladata.com/J-l56b0N5okc-e3uyBsfnwldHhg.jpg'); background-size:cover; transition:all 2s linear;}
    #ph3{position:absolute; z-index:2; width:0vw; height:0vh; border-radius:50%; transform:translate(40vw,46vh); background:url('http://ekladata.com/qA7-ovYgvuDTQYDVpR4GSfOmFdQ.jpg'); background-size:cover; transition:all 2s linear;}
    #ph4{position:absolute; z-index:2; width:0vw; height:0vh; border-radius:50%; transform:translate(40vw,46vh); background:url('http://ekladata.com/cChYtB3V3yO3WNSiCvanMWt7xs0.jpg'); background-size:cover; transition:all 2s linear;}
    #ph5{position:absolute; z-index:2; width:0vw; height:0vh; border-radius:50%; transform:translate(40vw,46vh); background:url('http://ekladata.com/RsDu-KvVKmcMh23256n3U0ZqmAk.jpg'); background-size:cover; transition:all 2s linear;}
    #ph6{position:absolute; z-index:2; width:0vw; height:0vh; border-radius:50%; transform:translate(40vw,46vh); background:url('http://ekladata.com/3zmV3NWFup3NAa5LzWqOiQxwnIU.jpg'); background-size:cover; transition:all 2s linear;}

    #ph0:focus ~ #ph1,#ph1:focus ~ #ph2,#ph2:focus ~ #ph3,#ph3:focus ~ #ph4,#ph4:focus ~ #ph5,#ph5:focus ~ #ph6{z-index:10; width:80vw; height:92vh; transform:translate(0vw,0vh); border-radius:0%;}
    --></style>