• Photos verticales

    Je viens de prendre quelques photos "verticales": les voici dans un montage qui devrait permettre d'en publier pas mal d'un coup !

    14 photos à survoler, c'est beaucoup mais en le regroupant; le nombre d'images peut être ajusté à vos besoins.

    Chaque image a une position et une animation particulière, ce qui justifie le nombre de lignes répétitives.

    Survol

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; background: url('http://ekladata.com/XM4pm_S_tGPYvB0alyjMHFNM-H8.jpg'); background-size: cover;">
    <p id="rm0">Survol</p>
    <p id="rm1" class="rm">&nbsp;</p>
    <p id="rm2" class="rm">&nbsp;</p>
    <p id="rm3" class="rm">&nbsp;</p>
    <p id="rm4" class="rm">&nbsp;</p>
    <p id="rm5" class="rm">&nbsp;</p>
    <p id="rm6" class="rm">&nbsp;</p>
    <p id="rm7" class="rm">&nbsp;</p>
    <p id="rm8" class="rm">&nbsp;</p>
    <p id="rm9" class="rm">&nbsp;</p>
    <p id="rm10" class="rm">&nbsp;</p>
    <p id="rm11" class="rm">&nbsp;</p>
    <p id="rm12" class="rm">&nbsp;</p>
    <p id="rm13" class="rm">&nbsp;</p>
    <p id="rm14" class="rm">&nbsp;</p>
    </div>
    <style><!--
    #rm1{ background-size:cover; background:url('http://ekladata.com/amelomLzEsDK-RJ6-G_k02nJyhA.jpg'); background-position:center center; transform:translate(2vw,3vw) perspective(40vw) rotatey(80deg);}
    #rm2{ background-size:cover; background:url('http://ekladata.com/xoTOk0G4Xrgw2gj2LQGQvpUJF_s.jpg'); background-position:center center; transform:translate(10vw,3vw) perspective(40vw) rotatey(-80deg);}
    #rm3{ background-size:cover; background:url('http://ekladata.com/kdjHknEe8VTOTmIR9YOl5j2GVLc.jpg'); background-position:center center; transform:translate(18vw,3vw) perspective(40vw) rotatey(80deg);}
    #rm4{ background-size:cover; background:url('http://ekladata.com/04JXBF6tQZCGxZfyzj7nyf2hOow.jpg'); background-position:center center; transform:translate(26vw,3vw) perspective(40vw) rotatey(-80deg);}
    #rm5{ background-size:cover; background:url('http://ekladata.com/ddv_wkGbTkNnd_SVnEeql87KuFQ.jpg'); background-position:center center; transform:translate(34vw,3vw) perspective(40vw) rotatey(80deg);}
    #rm6{ background-size:cover; background:url('http://ekladata.com/au-4AmO4bjrzPzTg1xIZ4752KZg.jpg'); background-position:center center; transform:translate(42vw,3vw) perspective(40vw) rotatey(-80deg);}
    #rm7{ background-size:cover; background:url('http://ekladata.com/ANwI3Yl0LoGZIMXfe53DT4wt5vk.jpg'); background-position:center center; transform:translate(50vw,3vw) perspective(40vw) rotatey(80deg);}
    #rm8{ background-size:cover; background:url('http://ekladata.com/79bwNYrMSDONUWkIqBmHZb9_EhU.jpg'); background-position:center center; transform:translate(2vw,20vw) rotatey(80deg);}
    #rm9{ background-size:cover; background:url('http://ekladata.com/vXCD1W_12jq2kL4pzBodexDtb5M.jpg'); background-position:center center; transform:translate(10vw,20vw) perspective(40vw) rotatey(-80deg);}
    #rm10{ background-size:cover; background:url('http://ekladata.com/AyTSNLvWjJulOFMc456uD-QBWh8.jpg'); background-position:center center; transform:translate(18vw,20vw) perspective(40vw) rotatey(80deg);}
    #rm11{ background-size:cover; background:url('http://ekladata.com/fm44kk2R3ygfqn55l4_G7a_U2cU.jpg'); background-position:center center; transform:translate(26vw,20vw) perspective(40vw) rotatey(-80deg);}
    #rm12{ background-size:cover; background:url('http://ekladata.com/v78k4ZaaEV_MvEj48EpFcWkZ5PU.jpg'); background-position:center center; transform:translate(34vw,20vw) perspective(40vw) rotatey(80deg);}
    #rm13{ background-size:cover; background:url('http://ekladata.com/yV2YRlpHf0MZjQX3dk8brUnbiJ0.jpg'); background-position:center center; transform:translate(42vw,20vw) perspective(40vw) rotatey(-80deg);}
    #rm14{ background-size:cover; background:url('http://ekladata.com/CGESNrSayIBMCKX7CPi0darceeM.jpg'); background-position:center center; transform:translate(50vw,20vw) perspective(40vw) rotatey(80deg);}
    #rm1:hover,#rm8:hover{z-index:5; width:19vw; height:33.75vw;transform:translate(0vw,0vw) rotatey(0deg) perspective(100vw);}
    #rm2:hover,#rm9:hover{z-index:5; width:19vw; height:33.75vw;transform:translate(5vw,0vw) rotatey(0deg) perspective(100vw);}
    #rm3:hover,#rm10:hover{z-index:5; width:19vw; height:33.75vw;transform:translate(13vw,0vw) rotatey(0deg) perspective(100vw);}
    #rm4:hover,#rm11:hover{z-index:5; width:19vw; height:33.75vw;transform:translate(21vw,0vw) rotatey(0deg) perspective(100vw);}
    #rm5:hover,#rm12:hover{z-index:5; width:19vw; height:33.75vw;transform:translate(29vw,0vw) rotatey(0deg) perspective(100vw);}
    #rm6:hover,#rm13:hover{z-index:5; width:19vw; height:33.75vw;transform:translate(37vw,0vw) rotatey(0deg) perspective(100vw);}
    #rm7:hover,#rm14:hover{z-index:5; width:19vw; height:33.75vw;transform:translate(41vw,0vw) rotatey(0deg) perspective(100vw);}
    --></style>

     

    N'oubliez pas, comme moi, que transform:translate(50vw,20vw) perspective(40vw) rotatey(80deg); s'écrit dans cet ordre et non transform:translate(50vw,20vw)  rotatey(80deg) perspective(40vw) ;}