• orotova

    La Orotava est une vallée et une agglomération au dessus de Puerto de la cruz.Tenerife.Canaries.

    Survol 1 Survol 1 Survol 1 Survol 1 Survol 1 Survol 1 Survol 1 Survol 1

    2 formats d'images: 1920x1080px en horizontal et 608x1080px pour les verticales.

    Rotation et couleur au clic.

    <div style="text-align: left; width: 60vw; height: 5vw; margin: 0.1vh auto;"><input id="mm1" class="mm" type="text" /> <input id="mm2" class="mm" type="text" /> <input id="mm3" class="mm" type="text" /> <input id="mm4" class="mma" type="text" /> <input id="mm5" class="mm" type="text" /> <input id="mm6" class="mma" type="text" /> <input id="mm7" class="mma" type="text" /> <input id="mm8" class="mm" type="text" /> <img id="pga" class="pg1" src="http://ekladata.com/vOl7u9_kMyHcpFemQxKFXMFMx_I.jpg" alt="Survol 1" /> <img id="pgb" class="pg1" src="http://ekladata.com/blPUeOnxY1QSlGgJxLOWxmZYD4Q.jpg" alt="Survol 1" /> <img id="pgc" class="pg1" src="http://ekladata.com/QK8em2ylmNuDru4OADAAPqcx1aE.jpg" alt="Survol 1" /> <img id="pgd" class="pg2" src="http://ekladata.com/RREgV2mp0MDCOLX3OtHzKD_XsDE.jpg" alt="Survol 1" /> <img id="pge" class="pg1" src="http://ekladata.com/fkfYFzHjXMKUAyzVG8zDEvBssgk.jpg" alt="Survol 1" /> <img id="pgf" class="pg2" src="http://ekladata.com/qiO21s82xHVofO30cAtI2Ee5K_E.jpg" alt="Survol 1" /> <img id="pgg" class="pg2" src="http://ekladata.com/zyTraf-le7Aa-QyI5K9JwMr91o4.jpg" alt="Survol 1" /> <img id="pgh" class="pg1" src="http://ekladata.com/YNE24XeJOGSN2Sj7hgSueb75wcY.jpg" alt="Survol 1" /></div>

    <style><!--
    .mm{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.3vh solid white; box-shadow:-0.3vh 0.3vh 0.5vh black; border-radius:2vw; margin:0 0.2vh; -webkit-filter:grayscale(1);}
    .mma{position:absolute; z-index:1; width:2.5vw; height:4.5vw; border:0.3vh solid white; box-shadow:-0.3vh 0.3vh 0.5vh black; border-radius:2vw; margin:0 0.2vh; -webkit-filter:grayscale(1);}
    #mm1{background:url('http://ekladata.com/vOl7u9_kMyHcpFemQxKFXMFMx_I@150x84.jpg'); background-size:cover; transform:translate(2vw,0vw) rotatey(180deg);}
    #mm2{background:url('http://ekladata.com/blPUeOnxY1QSlGgJxLOWxmZYD4Q@150x84.jpg'); background-size:cover; transform:translate(11vw,0vw) rotatey(180deg);}
    #mm3{background:url('http://ekladata.com/QK8em2ylmNuDru4OADAAPqcx1aE@150x84.jpg'); background-size:cover; transform:translate(20vw,0vw) rotatey(180deg);}
    #mm4{background:url('http://ekladata.com/RREgV2mp0MDCOLX3OtHzKD_XsDE@47x83.jpg'); background-size:cover; transform:translate(29vw,0vw) rotatey(180deg);}
    #mm5{background:url('http://ekladata.com/fkfYFzHjXMKUAyzVG8zDEvBssgk@150x84.jpg'); background-size:cover; transform:translate(33vw,0vw) rotatey(180deg);}
    #mm6{background:url('http://ekladata.com/qiO21s82xHVofO30cAtI2Ee5K_E@47x83.jpg'); background-size:cover; transform:translate(42vw,0vw) rotatey(180deg);}
    #mm7{background:url('http://ekladata.com/zyTraf-le7Aa-QyI5K9JwMr91o4@47x83.jpg'); background-size:cover; transform:translate(45.5vw,0vw) rotatey(180deg);}
    #mm8{background:url('http://ekladata.com/YNE24XeJOGSN2Sj7hgSueb75wcY@150x84.jpg'); background-size:cover; transform:translate(49vw,0vw) rotatey(180deg);}

    .pg1{position:absolute; z-index:1; width:0vw; height:0vw; left:50vw; top:15vw; transform:rotatey(180deg); transition:all 1s linear;}
    .pg2{position:absolute; z-index:1; width:0vw; height:0vw; left:50vw; top:15vw; transform:rotatey(180deg); transition:all 1s linear;}
    #mm1:focus ~ #pga,#mm2:focus ~ #pgb,#mm3:focus ~ #pgc,#mm5:focus ~ #pge,#mm8:focus ~ #pgh{z-index:100; left:0vw; top:0vw; width:100vw; height:56.25vw; transform:rotatey(0deg); -webkit-filter:grayscale(0);}
    #mm4:focus ~ #pgd,#mm6:focus ~ #pgf,#mm7:focus ~ #pgg{z-index:100; left:35vw; top:0vw; width:32vw; height:56.25vw; transform:rotatey(0deg); -webkit-filter:grayscale(0);}
    --></style>