• Montage 247a

    Variante. 

     

    Survol

    <div style="width: 900px; height: 506px; margin: 5px auto; border: 1px solid black; background: url('http://ekladata.com/7pcHVENPoL2WbDLISaB06ljkTAk.jpg'); background-size: cover; text-align: left;">
    <p id="bande">&nbsp;</p>
    <p id="mge0">Survol</p>
    <img id="mage1" class="mage" src="http://ekladata.com/b7pS1QtdAjFIS8aZ4LH0v9UdiyM.jpg" alt="" />

    <img id="mage2" class="mage" src="http://ekladata.com/Fg9xeZnIORZptu-l_k01BoDsex8.jpg" alt="" />

    <img id="mage3" class="mage" src="http://ekladata.com/AYjto9U-_b3Z9VKIU4x90EbwZ0Q.jpg" alt="" />

    <img id="mage4" class="mage" src="http://ekladata.com/P8Hemrkk2lYlgzW_Eqg3vnNIfwk.jpg" alt="" />

    <img id="mage5" class="mage" src="http://ekladata.com/uef8ekYyVPpO_1Efrjb92lpqrtk.jpg" alt="" />

    <img id="mage6" class="mage" src="http://ekladata.com/kWWcftzlCPNqnzA5Hh-l-8KtiPw.jpg" alt="" /></div>

    <style><!--
    #bande{position:absolute; z-index:1; width:50px; height:506px; background:rgba(255,255,255,0.5); transform:translate(850px,0px);}
    #mge0{position:absolute; z-index:1; width:100px; font-size:30px;transform:translate(800px,0px);}
    .mage{position:absolute; z-index:1; width:900px; height:506px; transition:all 1s linear;}
    #mage1{clip-path:polygon(850px 50px, 900px 80px, 900px 110px, 850px 80px);}
    #mage2{clip-path:polygon(850px 110px, 900px 140px, 900px 170px, 850px 140px);}
    #mage3{clip-path:polygon(850px 170px, 900px 200px, 900px 230px, 850px 200px);}
    #mage4{clip-path:polygon(850px 230px, 900px 260px, 900px 290px, 850px 260px);}
    #mage5{clip-path:polygon(850px 290px, 900px 320px, 900px 350px, 850px 320px);}
    #mage6{clip-path:polygon(850px 350px, 900px 380px, 900px 410px, 850px 380px);}
    #mage1:hover,#mage2:hover,#mage3:hover,#mage4:hover,#mage5:hover,#mage6:hover{z-index:5;clip-path:polygon(0px 0px, 900px 0px, 900px 506px, 0px 506px);}
    --></style>