• en carrés

     

    Survol

     

     

     

     

     

     

    <div style="position: relative; width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; overflow: hidden; background: url('http://ekladata.com/HdZ4KkUFOzeAsxNTJ2kAL5HGtF4/whitewater.jpg'); background-size: cover;">
    <p id="ph0">Survol</p>
    <p id="ph1">&nbsp;</p>
    <p id="ph2">&nbsp;</p>
    <p id="ph3">&nbsp;</p>
    <p id="ph4">&nbsp;</p>
    <p id="ph5">&nbsp;</p>
    <p id="ph6">&nbsp;</p>
    </div>

    <style><!--
    #ph0{position:absolute; z-index:1; width:6vw; background:rgba(0,0,0,0.5);text-align:center; font-size:1.5vw; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(0vw,0vw);}
    #ph1{position:absolute; z-index:6; width:20vw; height:20vw; box-sizing:border:box; border:0.4vh solid grey; background:url('http://ekladata.com/0Q-_lRtoYI53AvWKfZDOWxYzXdU.jpg'); background-size:cover; background-position:center center; transform:translate(7vw,7vw) rotate(45deg); transition:all 1s linear;}
    #ph2{position:absolute; z-index:5; width:20vw; height:20vw; box-sizing:border:box; border:0.4vh solid grey; background:url('http://ekladata.com/dL_4wAtCl0rPlvPfJPlVdzvaJT0.jpg'); background-size:cover; background-position:center center; transform:translate(12vw,7vw) rotate(45deg); transition:all 1s linear;}
    #ph3{position:absolute; z-index:4; width:20vw; height:20vw; box-sizing:border:box; border:0.4vh solid grey; background:url('http://ekladata.com/pr9z1hjS8a51h10Lf5QJiFemNOk.jpg'); background-size:cover; background-position:center center; transform:translate(17vw,7vw) rotate(45deg); transition:all 1s linear;}
    #ph4{position:absolute; z-index:3; width:20vw; height:20vw; box-sizing:border:box; border:0.4vh solid grey; background:url('http://ekladata.com/EI8zn6RBItxqWaUGenoXT8_zYCI.jpg'); background-size:cover; background-position:center center; transform:translate(22vw,7vw) rotate(45deg); transition:all 1s linear;}
    #ph5{position:absolute; z-index:2; width:20vw; height:20vw; box-sizing:border:box; border:0.4vh solid grey; background:url('http://ekladata.com/cO_MzeudDRijmWN3lxGdawkVgRo.jpg'); background-size:cover; background-position:center center; transform:translate(27vw,7vw) rotate(45deg); transition:all 1s linear;}
    #ph6{position:absolute; z-index:1; width:20vw; height:20vw; box-sizing:border:box; border:0.4vh solid grey; background:url('http://ekladata.com/k7gRaH-AhKbayJpGjwFoADea4yM.jpg'); background-size:cover; background-position:center center; transform:translate(32vw,7vw) rotate(45deg); transition:all 1s linear;}
    #ph1:hover,#ph2:hover,#ph3:hover,#ph4:hover,#ph5:hover,#ph6:hover{z-index:10;width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg); border:none;}
    --></style>