• arc en ciel 1

    Amusement pour présenter quelques photos sans transition.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="margin: 0% 0% 50% 10%;">
    <p id="a0">&nbsp;</p>
    <p id="a1" class="aa">&nbsp;</p>
    <p id="a2" class="aa">&nbsp;</p>
    <p id="a3" class="aa">&nbsp;</p>
    <p id="a4" class="aa">&nbsp;</p>
    <p id="a5" class="aa">&nbsp;</p>
    <p id="a6" class="aa">&nbsp;</p>
    <p id="a7" class="aa">&nbsp;</p>
    <p id="b0">&nbsp;</p>
    <p id="b1">&nbsp;</p>
    <p id="b2">&nbsp;</p>
    <p id="b3">&nbsp;</p>
    <p id="b4">&nbsp;</p>
    <p id="b5">&nbsp;</p>
    <p id="b6">&nbsp;</p>
    <p id="b7">&nbsp;</p>
    </div>
    <hr style="border: 3px double grey;" />
    <p>...</p>
    <style><!--
    #a0{position:absolute; z-index:9; width:1.5vw; height:42vh; margin:2vh 78.5vw; background:url('http://ekladata.com/e2-Mu_-__wZhEq7li9-NJCkCAcM/arc1v.jpg'); background-size:cover;}
    .aa{position:absolute; z-index:10; width:1.4vw; height:6vh;border:0.1vw solid black;}
    #a1{margin:2vh 78.5vw;}
    #a2{margin:8vh 78.5vw;}
    #a3{margin:14vh 78.5vw;}
    #a4{margin:20vh 78.5vw;}
    #a5{margin:26vh 78.5vw;}
    #a6{margin:32vh 78.5vw;}
    #a7{margin:38vh 78.5vw;}

    #b0{position:absolute; z-index:1; margin:0vw 0vh; background:url('http://ekladata.com/58fXacMOTxSDFNOUAxu4pKM-ets.jpg'); background-size:cover; width:80vw; height:80vh; border:0.4vw ridge grey;}
    #b1{position:absolute; z-index:2; margin:0.4vh 0.4vw; background:url('http://ekladata.com/yMcJRYEsDCzEEd1IVGzaUmgkf64.jpg'); background-size:cover; width:80vw; height:80vh; opacity:0;}
    #b2{position:absolute; z-index:2; margin:0.8vh 0.4vw; background:url('http://ekladata.com/t9iIqZMBD3JsUsTzKCm5Bb9UC68.jpg'); background-size:cover; width:80vw; height:80vh; opacity:0;}
    #b3{position:absolute; z-index:2; margin:0.8vh 0.4vw; background:url('http://ekladata.com/Vh8Vbj6RiYM3D4b-EHBRbDJvU6k.jpg'); background-size:cover; width:80vw; height:80vh; opacity:0;}
    #b4{position:absolute; z-index:2; margin:0.8vh 0.4vw; background:url('http://ekladata.com/G1rr-o3gJAGZzm8zjhOumtvVl3M.jpg'); background-size:cover; width:80vw; height:80vh; opacity:0;}
    #b5{position:absolute; z-index:2; margin:0.8vh 0.4vw; background:url('http://ekladata.com/xPob9iJ32rbc59yzA0kqM0cbCY4.jpg'); background-size:cover; width:80vw; height:80vh; opacity:0;}
    #b6{position:absolute; z-index:2; margin:0.8vh 0.4vw; background:url('http://ekladata.com/IKzeEeQ-f13tlXRVd8ccM81G-l0.jpg'); background-size:cover; width:80vw; height:80vh; opacity:0;}
    #b7{position:absolute; z-index:2; margin:0.8vh 0.4vw; background:url('http://ekladata.com/WYRxwg1s7t9N9jAagAR-A5if9bE.jpg'); background-size:cover; width:80vw; height:80vh; opacity:0;}

    #a1:hover ~ #b1,#a2:hover ~ #b2,#a3:hover ~ #b3,#a4:hover ~ #b4,#a5:hover ~ #b5,#a6:hover ~ #b6,#a7:hover ~ #b7{opacity:1;}
    --></style>