• Montage 93

    Pour changer du noir et blanc/couleur, voici sépia/couleur

    Survol puis clic maintenu pour colorer

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: linear-gradient(to bottom,rgba(255,200,200,08) 0%, rgba(150,150,0,0.3) 100%);">
    <p id="gh0">Survol puis clic maintenu pour colorer</p>
    <p id="gh1" class="gh">&nbsp;</p>
    <p id="gh2" class="gh">&nbsp;</p>
    <p id="gh3" class="gh">&nbsp;</p>
    <p id="gh4" class="gh">&nbsp;</p>
    <p id="gh5" class="gh">&nbsp;</p>
    <p id="gh6" class="gh">&nbsp;</p>
    <p id="gh7" class="gh">&nbsp;</p>
    <p id="gh8" class="gh">&nbsp;</p>
    <p id="gh9" class="gh">&nbsp;</p>
    </div>

    <style><!--
    #gh0{position:absolute; z-index:1; width:25vw; text-align:center; font-size:1vw; transform:translate(17vw,1vw); border:0.1vh solid black;}
    .gh{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh ridge white; box-shadow:0.4vh 0.4vh 0.6vh black; filter:sepia(1); transition:all 1s linear;}
    #gh1{transform:translate(2vw,3vw) rotatex(60deg); background:url('http://ekladata.com/z0SR9DHhEI0cjYQM552bTdQoqWs.jpg'); background-position:-2vw -3vw; background-size:60vw,33.75vw);}
    #gh2{transform:translate(22vw,3vw) rotatex(60deg); background:url('http://ekladata.com/6fQ1ZiVFXMcNFSsjP-bBHMx5UUg.jpg'); background-position:-22vw -3vw; background-size:60vw,33.75vw);}
    #gh3{transform:translate(42vw,3vw) rotatex(60deg); background:url('http://ekladata.com/d_pU7BmRL89j6WmjGCUfshKcYfk.jpg'); background-position:-42vw -3vw; background-size:60vw,33.75vw);}
    #gh4{transform:translate(2vw,13vw) rotatex(60deg); background:url('http://ekladata.com/HfZlXYqr1lytA1KyGU-TzFF_ugY.jpg'); background-position:-2vw -13vw; background-size:60vw,33.75vw);}
    #gh5{transform:translate(22vw,13vw) rotatex(60deg); background:url('http://ekladata.com/Yf82hRCK6tgmvnvrfdzW3OoU1UE.jpg'); background-position:-22vw -13vw; background-size:60vw,33.75vw);}
    #gh6{transform:translate(42vw,13vw) rotatex(60deg); background:url('http://ekladata.com/exjayArHSTvkG5fpEMPUYdIMcsE.jpg'); background-position:-42vw -13vw; background-size:60vw,33.75vw);}
    #gh7{transform:translate(2vw,23vw) rotatex(60deg); background:url('http://ekladata.com/ANEneiyILrAbDvMPdLIGw1Q8JYM.jpg'); background-position:-2vw -23vw; background-size:60vw,33.75vw);}
    #gh8{transform:translate(22vw,23vw) rotatex(60deg); background:url('http://ekladata.com/XdppYQwGOKPRPZ_Gbvn368d-trQ.jpg'); background-position:-22vw -23vw; background-size:60vw,33.75vw);}
    #gh9{transform:translate(42vw,23vw) rotatex(60deg); background:url('http://ekladata.com/VKkapZFv_DjZ4VnLATiMOAMdMZA.jpg'); background-position:-42vw -23vw; background-size:60vw,33.75vw);}
    #gh1:hover,#gh2:hover,#gh3:hover,#gh4:hover,#gh5:hover,#gh6:hover,#gh7:hover,#gh8:hover,#gh9:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatex(0deg);background-position:0vw 0vw; }
    #gh1:active,#gh2:active,#gh3:active,#gh4:active,#gh5:active,#gh6:active,#gh7:active,#gh8:active,#gh9:active{filter:sepia(0);}
    --></style>