• 30.10.23

    4 images, au ratio 16/9, dimensionnées en 1100x620px, à survoler.

     

     

     

     

    <div style="width: 1100px; height: 620px; margin: 30px auto; text-align: left; box-shadow:4px 4px 8px black;">
    <p id="zn1" class="zn">&nbsp;</p>
    <p id="zn2" class="zn">&nbsp;</p>
    <p id="zn3" class="zn">&nbsp;</p>
    <p id="zn4" class="zn">&nbsp;</p>
    </div>

    <style><!--
    .zn{position:absolute; z-index:1; filter:grayscale(0.7); transition:all 1s;}
    #zn1{box-sizing:border-box; border:4px solid white; width:700px; height:430px; background:url('http://ekladata.com/6YkGNUL3m_y_8xtVVF2redOOfWE@1100x620.jpg'); background-size:1100px 620px; background-position:-200px 0px; transform:translate(200px,0px) perspective(0px); transform-origin:top center;}
    #zn2{box-sizing:border-box; border:4px solid white; width:300px; height:620px; background:url('http://ekladata.com/sZYiHt2-M1mZH-ZHTcCEVgZAm9E@1100x620.jpg'); background-size:1100px 620px;background-position:0px 0px; transform:translate(0px,0px) perspective(200px) rotatey(17deg); transform-origin:top left;}
    #zn3{box-sizing:border-box; border:4px solid white; width:1100px; height:320px; background:url('http://ekladata.com/EHfymFvHs-rm_wXbL-gaWe-vRM8@1100x620.jpg'); background-size:1100px 620px;background-position:0px -300px; transform:translate(0px,300px) perspective(200px) rotatex(21deg); transform-origin:bottom center;}
    #zn4{box-sizing:border-box; border:4px solid white; width:300px; height:620px; background:url('http://ekladata.com/BfvFx1iAys4RZCQPpLNq8yRRFK4@1100x620.jpg'); background-size:1100px 620px;background-position:-800px 0px; transform:translate(800px,0px) perspective(200px) rotatey(-17deg); transform-origin:top right;}
    #zn1:hover,#zn2:hover,#zn3:hover,#zn4:hover{z-index:5; filter:grayscale(0); width:1100px; height:620px; background-position:0px 0px; transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
    --></style>