• Halloween

    Montage en 1100px par 619px, ratio 16/9. Remplacez les adresses de mes 5 images par les vôtres.

     

     

     

     

     

    Survol citrouilles

     

     

     

     

     


    <div style="width: 1100px; height: 619px; margin: 30px auto; text-align: left; background: url('http://ekladata.com/SHuDfoW3D2_9yvxLillxw3hvUXU.png'); background-size: cover;">
    <p id="sel1" class="sel">&nbsp;</p>
    <p id="sel2" class="sel">&nbsp;</p>
    <p id="sel3" class="sel">&nbsp;</p>
    <p id="sel4" class="sel">&nbsp;</p>
    <p id="sel5" class="sel">&nbsp;</p>

    <p id="mg0">Survol citrouilles</p>
    <p id="mg1" class="mg">&nbsp;</p>
    <p id="mg2" class="mg">&nbsp;</p>
    <p id="mg3" class="mg">&nbsp;</p>
    <p id="mg4" class="mg">&nbsp;</p>
    <p id="mg5" class="mg">&nbsp;</p>
    </div>

    <style><!--
    .sel{position:absolute; z-index:10; border-radius:50%; border:2px solid white;}
    #sel1{width:120px; height:120px; transform:translate(490px,60px);}
    #sel2{width:90px; height:90px; transform:translate(720px,240px);}
    #sel3{width:110px; height:110px; transform:translate(550px,460px);}
    #sel4{width:90px; height:90px; transform:translate(285px,335px);}
    #sel5{width:80px; height:80px; transform:translate(280px,160px);}
    .mg{position:absolute; z-index:5; width:0px; height:0px; transition:all 2s;}

    #mg0{position:absolute; z-index:5; width:450px; font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(50px,50px);}
    #mg1{background:url('http://ekladata.com/5Ln7IInW1nLc1zp0EupLJKSzTeQ@1100x619.jpg'); background-position:-550px -120px; transform:translate(550px,120px);}
    #mg2{background:url('http://ekladata.com/xRbwrBqGnRiU5zkVUSc4eE4FOeM@1100x619.jpg'); background-position:-765px -285px; transform:translate(765px,285px);}
    #mg3{background:url('http://ekladata.com/sCTBu6hKXWbW5yQBm_NMUNUQy5A@1100x619.jpg'); background-position:-605px -515px; transform:translate(605px,515px);}
    #mg4{background:url('http://ekladata.com/Hd-Xe54qplztQSF_H0nzoECdZlk@1100x619.jpg'); background-position:-320px -380px; transform:translate(320px,380px);}
    #mg5{background:url('http://ekladata.com/NrVGtbTM0qgPUx9icu59v_Yj8E4@1100x619.jpg'); background-position:-320px -200px; transform:translate(320px,200px);}
    #sel1:hover ~ #mg1,#sel2:hover ~ #mg2,#sel3:hover ~ #mg3,#sel4:hover ~ #mg4,#sel5:hover ~ #mg5{width:1100px; height:619px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>