• Exemple 16

    Pour publier 6 images (+ ou -) au ratio 16/9 verticales.

    Survol

     

     

     

     

     

     


    <div style="width: 19vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.4vh ridge white; background: linear-gradient(to top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);">
    <p id="fft0">Survol</p>
    <p id="fft1" class="fft">&nbsp;</p>
    <p id="fft2" class="fft">&nbsp;</p>
    <p id="fft3" class="fft">&nbsp;</p>
    <p id="fft4" class="fft">&nbsp;</p>
    <p id="fft5" class="fft">&nbsp;</p>
    <p id="fft6" class="fft">&nbsp;</p>
    </div>

    <style><!--
    #fft0{position:absolute; z-index:1; width:9vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(10vw,1vw);}
    .fft{position:absolute; z-index:1; width:4.5vw; height:8vw; border:0.4vh solid white; transition:all 1s linear;}
    #fft1{background:url('http://ekladata.com/kYFU-DDTC_YUCE7FDGCscEwVgp4.jpg'); background-size:cover; transform:translate(2vw,3vw);}
    #fft2{background:url('http://ekladata.com/hF2U348vaps3Fu9q7Od3iGzR4TM.jpg'); background-size:cover; transform:translate(4vw,7vw);}
    #fft3{background:url('http://ekladata.com/ilEtF57ECR23kNqQ5OTaq6S8S4o.jpg'); background-size:cover; transform:translate(6vw,11vw);}
    #fft4{background:url('http://ekladata.com/R0Vax8f3uz538yhYXuwK9pVsoVA.jpg'); background-size:cover; transform:translate(8vw,15vw);}
    #fft5{background:url('http://ekladata.com/d0SpDZ_Ld36BXYR8vumHZ1ldnd8.jpg'); background-size:cover; transform:translate(10vw,19vw);}
    #fft6{background:url('http://ekladata.com/xvDDUs0GV97Np9azV5dvxcWpulA.jpg'); background-size:cover; transform:translate(12vw,23vw);}
    #fft1:hover,#fft2:hover,#fft3:hover,#fft4:hover,#fft5:hover,#fft6:hover{z-index:5; width:19vw; height:33.75vw; border:none; transform:translate(0vw,0vw);}
    --></style>