• Lunaire 1

    8 photos en 1920x1080px (16/9), hébergées dans ce format dans un album Ekla qui remplissent l'écran de lecture quelles que soient ses dimensions, au clic sur chaque vignette.

    Si vos photos en 16/9 sont plus grandes, vous pouvez les héberger dans votre format et les réduire en modifiant leurs adresses: exemple:

    l'adresse de votre image à votre format: http://ekladata.com/UJs7jUDOCbO0wYwqk5lBh7_Pwf0.jpg

    l'adresse de votre image au format 1920x1080px: http://ekladata.com/UJs7jUDOCbO0wYwqk5lBh7_Pwf0@1920x1080.jpg

    Leur taille et leur poids seront modifiés.

    <div style="width: 65.7vw; height: 4.7vw; border: 0.2vh solid black; margin: 0 auto; text-align: left;"><input id="ln1" class="ln" type="text" /> <input id="ln2" class="ln" type="text" /> <input id="ln3" class="ln" type="text" /> <input id="ln4" class="ln" type="text" /> <input id="ln5" class="ln" type="text" /> <input id="ln6" class="ln" type="text" /> <input id="ln7" class="ln" type="text" /> <input id="ln8" class="ln" type="text" /> <img id="lna1" class="lna" src="http://ekladata.com/UJs7jUDOCbO0wYwqk5lBh7_Pwf0.jpg" alt="" /> <img id="lna2" class="lna" src="http://ekladata.com/Hu4lxOFCNgeyJAk2MhkIw1VBFJM.jpg" alt="" /> <img id="lna3" class="lna" src="http://ekladata.com/SZTCtsF0yxlEwiJtD7d30pgzRwc.jpg" alt="" /> <img id="lna4" class="lna" src="http://ekladata.com/3JUE8idTE6nNcJ3hByDIoXZ8vCk.jpg" alt="" /> <img id="lna5" class="lna" src="http://ekladata.com/EeqNrQMz9Nr7t1SQD32z1ERPrIc.jpg" alt="" /> <img id="lna6" class="lna" src="http://ekladata.com/Qz_QzC8LlFSyS6Lf1uUFxMcJUeU.jpg" alt="" /> <img id="lna7" class="lna" src="http://ekladata.com/dIOk57rMZobfQmzoEO_4ZS1qKkE.jpg" alt="" /> <img id="lna8" class="lna" src="http://ekladata.com/E622uTm4VdFzBv7aqCSxvpLf0gg.jpg" alt="" /></div>
    <style><!--
    .ln{float:left; width:8vw; height:4.5vw; border:0.2vh solid black; opacity:0.3;}

    #ln1{background:url('http://ekladata.com/UJs7jUDOCbO0wYwqk5lBh7_Pwf0@160x90.jpg'); background-size:cover;}
    #ln2{background:url('http://ekladata.com/Hu4lxOFCNgeyJAk2MhkIw1VBFJM@160x90.jpg'); background-size:cover;}
    #ln3{background:url('http://ekladata.com/SZTCtsF0yxlEwiJtD7d30pgzRwc@160x90.jpg'); background-size:cover;}
    #ln4{background:url('http://ekladata.com/3JUE8idTE6nNcJ3hByDIoXZ8vCk@160x90.jpg'); background-size:cover;}
    #ln5{background:url('http://ekladata.com/EeqNrQMz9Nr7t1SQD32z1ERPrIc@160x90.jpg'); background-size:cover;}
    #ln6{background:url('http://ekladata.com/Qz_QzC8LlFSyS6Lf1uUFxMcJUeU@160x90.jpg'); background-size:cover;}
    #ln7{background:url('http://ekladata.com/dIOk57rMZobfQmzoEO_4ZS1qKkE@160x90.jpg'); background-size:cover;}
    #ln8{background:url('http://ekladata.com/E622uTm4VdFzBv7aqCSxvpLf0gg@160x90.jpg'); background-size:cover;}
    .ln:hover{opacity:1;}
    .lna{position:absolute; z-index:100; left:50%; top:30%; width:0vw; height:0vw; border-radius:50%; transition:all 1.5s linear;}
    #ln1:focus ~ #lna1,#ln2:focus ~ #lna2,#ln3:focus ~ #lna3,#ln4:focus ~ #lna4,#ln5:focus ~ #lna5,#ln6:focus ~ #lna6,#ln7:focus ~ #lna7,#ln8:focus ~ #lna8{left:0; top:0; width:100vw; height:56.25vw; border-radius:0%;}
    --></style>

    ***********************

    Les vignettes sont réduites en 160x90px par le principe de réduction de taille et de poids.

    L'animation de l'agrandissement est à votre choix.