• Exemple 179

    8 images au ratio 16/9 à survoler. 

     

     

     

     

     

     

     

     

    <div style="position: relative; width: 1000px; height: 562px; margin: 5px auto; border: 6px ridge white; overflow: hidden;">
    <p id="bis1" class="bis">&nbsp;</p>
    <p id="bis2" class="bis">&nbsp;</p>
    <p id="bis3" class="bis">&nbsp;</p>
    <p id="bis4" class="bis">&nbsp;</p>
    <p id="bis5" class="bis">&nbsp;</p>
    <p id="bis6" class="bis">&nbsp;</p>
    <p id="bis7" class="bis">&nbsp;</p>
    <p id="bis8" class="bis">&nbsp;</p>
    </div>

    <style><!--
    .bis{position:absolute; z-index:1; width:250px; height:562px; border:4px solid white; transition:all 1s linear;}
    #bis1{box-sizing:border-box; background:url('http://ekladata.com/BQ-xsKtK2npo3q7J74rc55egXe8.jpg'); background-size:1000px 562px; background-position:0px 150px; transform:translate(0px,-200px) skewy(20deg);}
    #bis2{box-sizing:border-box; background:url('http://ekladata.com/es4rvJBcGRWfmWsvAhgTj30mxAI.jpg'); background-size:1000px 562px; background-position:0px -300px; transform:translate(0px,360px) skewy(20deg);}
    #bis3{box-sizing:border-box; background:url('http://ekladata.com/nSMxkZKg31qgCkR_zlD4uYRFjTU.jpg'); background-size:1000px 562px; background-position:-250px 250px; transform:translate(250px,-300px) skewy(-20deg);}
    #bis4{box-sizing:border-box; background:url('http://ekladata.com/6e7l72zf-qWafd34XsvlFDl0fYI.jpg'); background-size:1000px 562px; background-position:-250px -200px; transform:translate(250px,260px) skewy(-20deg);}
    #bis5{box-sizing:border-box; background:url('http://ekladata.com/z55MfILYwODpIUp74vNYz1JakJQ.jpg'); background-size:1000px 562px; background-position:-500px 150px; transform:translate(500px,-200px) skewy(20deg);}
    #bis6{box-sizing:border-box; background:url('http://ekladata.com/y5b7UyCffBZ6V_VRyHFctBi7inM.jpg'); background-size:1000px 562px; background-position:-500px -300px; transform:translate(500px,360px) skewy(20deg);}
    #bis7{box-sizing:border-box; background:url('http://ekladata.com/_FWjOTN2e65BMxYOGclr47wvKgM.jpg'); background-size:1000px 562px; background-position:-750px 250px; transform:translate(750px,-300px) skewy(-20deg);}
    #bis8{box-sizing:border-box; background:url('http://ekladata.com/tpZzFdQiHT4-L72QUxT7uatP3bc.jpg'); background-size:1000px 562px; background-position:-750px -200px; transform:translate(750px,260px) skewy(-20deg);}
    #bis1:hover,#bis2:hover,#bis3:hover,#bis4:hover,#bis5:hover,#bis6:hover,#bis7:hover,#bis8:hover{z-index:5; width:1000px; height:562px; border:none; background-position:0px 0px; transform:translate(0px,0px) skewy(0deg);}
    --></style>