• Montage 27

    Une version sans lien en plein écran; clic sur chaque partie et retour par clic hors montage.


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;"><input id="part1" type="text" /> <input id="part2" type="text" /> <input id="part3" type="text" /> <input id="part4" type="text" /> <input id="part5" type="text" /> <input id="part6" type="text" /></div>
    <style><!--
    #part1{position:absolute; z-index:1; box-sizing:border-box; width:60vw; height:33.75vw; border:0.6vh solid white; background:url('http://ekladata.com/BmnXygFQW4FO-_MDN8dy4tawjkA@1152x648.jpg'); background-position:0vw 0vw; transform:translate(0vw,0vw); transition:all 1s linear;}
    #part2{position:absolute; z-index:1; box-sizing:border-box; width:50vw; height:28.75vw; border:0.6vh solid white; background:url('http://ekladata.com/jRZz-useFIsjrQBXhj5TRZz0Jio@1152x648.jpg'); background-position:-5vw -2.5vw; transform:translate(5vw,2.5vw); transition:all 1s linear;}
    #part3{position:absolute; z-index:1; box-sizing:border-box; width:40vw; height:23.75vw; border:0.6vh solid white; background:url('http://ekladata.com/B5UH5Gcwyfv9K17jm3c9YtUWrNg@1152x648.jpg'); background-position:-10vw -5vw; transform:translate(10vw,5vw); transition:all 1s linear;}
    #part4{position:absolute; z-index:1; box-sizing:border-box; width:30vw; height:18.75vw; border:0.6vh solid white; background:url('http://ekladata.com/g2lgeyrO4Pk5JLLx0oPiK1Qvp_4@1152x648.jpg'); background-position:-15vw -7.5vw; transform:translate(15vw,7.5vw); transition:all 1s linear;}
    #part5{position:absolute; z-index:1; box-sizing:border-box; width:20vw; height:13.75vw; border:0.6vh solid white; background:url('http://ekladata.com/jpxDKYa_jFRKgv8yt5_19NncIOE@1152x648.jpg'); background-position:-20vw -10vw; transform:translate(20vw,10vw); transition:all 1s linear;}
    #part6{position:absolute; z-index:1; box-sizing:border-box; width:10vw; height:8.75vw; border:0.6vh solid white; background:url('http://ekladata.com/FkFwgUIPE-TSvyYfJxjPBSADeO4@1152x648.jpg'); background-position:-25vw -12.5vw; transform:translate(25vw,12.5vw); transition:all 1s linear;}
    #part1:focus,#part2:focus,#part3:focus,#part4:focus,#part5:focus,#part6:focus{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>