• Montage 113

    Pas toujours possible de prendre des photos "horizontales", dans les vieilles villes, ici Nyons 26100.

    Pas facile non plus de les publier sur nos pages "horizontales" en 16/9.

    Voici une proposition pour 7 images verticales mais le principe peut s'adapter à des images horizontales:

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left; background: url('http://ekladata.com/9KKWOcyhPu9V5ktS6a_M40Z5FQg.jpg'); background-size: cover;"><input id="cde1" type="text" value="Clic bouton puis survol vignettes" />
    <p id="pho1" class="pho">&nbsp;</p>
    <p id="pho2" class="pho">&nbsp;</p>
    <p id="pho3" class="pho">&nbsp;</p>
    <p id="pho4" class="pho">&nbsp;</p>
    <p id="pho5" class="pho">&nbsp;</p>
    <p id="pho6" class="pho">&nbsp;</p>
    <p id="pho7" class="pho">&nbsp;</p>
    </div>
    <style><!--
    #cde1{position:absolute; z-index:1; width:25vw; border:none; border-radius:0.8vw; background:lime; box-shadow:inset -0.4vh -0.4vh 0.6vh black;text-align:center; font-size:1.5vw; padding:0.4vh; transform:translate(2vw,0vw);}
    .pho{position:absolute; z-index:1; width:9vw; height:16vw; border:0.5vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black; transition:all 1s linear;}
    #pho1{box-sizing:border-box; transform:translate(2vw,5vw) rotatey(90deg); background:url('http://ekladata.com/uK_Khe5OxfJ9NJ079WiUWfvfs9E.jpg'); background-size:cover;}
    #pho2{box-sizing:border-box; transform:translate(10vw,15vw) rotatey(90deg); background:url('http://ekladata.com/fpVcK5_T6cTrTRRbrbkGyVsAhvc.jpg'); background-size:cover;}
    #pho3{box-sizing:border-box; transform:translate(18vw,5vw) rotatey(90deg); background:url('http://ekladata.com/vFruQuFYALBhqVKxW6ahkPnXEhU.jpg'); background-size:cover;}
    #pho4{box-sizing:border-box; transform:translate(26vw,15vw) rotatey(90deg); background:url('http://ekladata.com/Kco72Dh-W8CaAfQ8fBcaXRKKaOQ.jpg'); background-size:cover;}
    #pho5{box-sizing:border-box; transform:translate(34vw,5vw) rotatey(90deg); background:url('http://ekladata.com/XIIxC-knoVTDtySXJx2s8Y1SOM4.jpg'); background-size:cover;}
    #pho6{box-sizing:border-box; transform:translate(42vw,15vw) rotatey(90deg); background:url('http://ekladata.com/BXlPmeI4YxkAcOR93utgj2pUVVw.jpg'); background-size:cover;}
    #pho7{box-sizing:border-box; transform:translate(50vw,5vw) rotatey(90deg); background:url('http://ekladata.com/2GotWq2Wit_e95_9rHPGmTsHU4U.jpg'); background-size:cover;}
    #cde1:focus ~ #pho1{transform:translate(2vw,5vw) rotatey(0deg); -webkit-filter:sepia(1); filter:sepia(1);}
    #cde1:focus ~ #pho2{transform:translate(10vw,15vw) rotatey(0deg); -webkit-filter:sepia(1); filter:sepia(1);}
    #cde1:focus ~ #pho3{transform:translate(18vw,5vw) rotatey(0deg); -webkit-filter:sepia(1); filter:sepia(1);}
    #cde1:focus ~ #pho4{transform:translate(26vw,15vw) rotatey(0deg); -webkit-filter:sepia(1); filter:sepia(1);}
    #cde1:focus ~ #pho5{transform:translate(34vw,5vw) rotatey(0deg); -webkit-filter:sepia(1); filter:sepia(1);}
    #cde1:focus ~ #pho6{transform:translate(42vw,15vw) rotatey(0deg); -webkit-filter:sepia(1); filter:sepia(1);}
    #cde1:focus ~ #pho7{transform:translate(50vw,5vw) rotatey(0deg); -webkit-filter:sepia(1); filter:sepia(1);}

    #cde1:focus ~ #pho1:hover{z-index:5; width:19vw; height:33.75vw; transform:translate(0vw,0vw); -webkit-filter:sepia(0); filter:sepia(0);}
    #cde1:focus ~ #pho2:hover{z-index:5; width:19vw; height:33.75vw; transform:translate(5vw,0vw); -webkit-filter:sepia(0); filter:sepia(0);}
    #cde1:focus ~ #pho3:hover{z-index:5; width:19vw; height:33.75vw; transform:translate(12vw,0vw); -webkit-filter:sepia(0); filter:sepia(0);}
    #cde1:focus ~ #pho4:hover{z-index:5; width:19vw; height:33.75vw; transform:translate(22vw,0vw); -webkit-filter:sepia(0); filter:sepia(0);}
    #cde1:focus ~ #pho5:hover{z-index:5; width:19vw; height:33.75vw; transform:translate(29vw,0vw); -webkit-filter:sepia(0); filter:sepia(0);}
    #cde1:focus ~ #pho6:hover{z-index:5; width:19vw; height:33.75vw; transform:translate(36vw,0vw); -webkit-filter:sepia(0); filter:sepia(0);}
    #cde1:focus ~ #pho7:hover{z-index:5; width:19vw; height:33.75vw; transform:translate(41vw,0vw); -webkit-filter:sepia(0); filter:sepia(0);}
    --></style>