• Exemple 229

     

    Survol

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 5px auto;">
    <p id="et0">Survol</p>
    <p id="et1" class="et">&nbsp;</p>
    <p id="et2" class="et">&nbsp;</p>
    <p id="et3" class="et">&nbsp;</p>
    <p id="et4" class="et">&nbsp;</p>
    </div>
    <style><!--
    #et0{position:absolute; z-index:1; width:150px; transform:translate(20px,200px); font-size:30px; color:coral; text-shadow:2px 2px black;}
    .et{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s linear;}
    #et1{background:url('http://ekladata.com/kQrfVJjIMGCTZZoO1dXvASZ3O30.jpg'); background-size:1000px 563px; clip-path:polygon(0% 0%,50% 0%, 50% 50%,0% 0%);}
    #et2{background:url('http://ekladata.com/GeDdc2PcTx2XPiFdm-oPNIIxED0.jpg'); background-size:1000px 563px; clip-path:polygon(50% 50%,100% 0%, 100% 50%,50% 50%);}
    #et3{background:url('http://ekladata.com/WCVIXj6qiJ8jh9gJ-sXdvI_JKH0.jpg'); background-size:1000px 563px; clip-path:polygon(50% 50%,100% 100%, 100% 100%,50% 100%);}
    #et4{background:url('http://ekladata.com/2ZYxQm0qCpvaJjNqB1ioJNl2nZA.jpg'); background-size:1000px 563px; clip-path:polygon(0% 50%,50% 50%, 0% 100%,0% 100%);}
    #et1:hover,#et2:hover,#et3:hover,#et4:hover{z-index:5;clip-path:polygon(0% 0%,100% 0%, 100% 100%,0% 100%);}
    --></style>