• Exemple 96

     8 images au ratio 16/9

    Survol


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left; background: url('http://ekladata.com/YpSmPZsYt4JFm2wPctkm6v3ZX54.jpg');">
    <p id="pht0">Survol</p>
    <img id="pht1" class="pht" src="http://ekladata.com/UZsKGQQ68uw-sYemq8YTZk8MkJU.jpg" alt="" /> <img id="pht2" class="pht" src="http://ekladata.com/6cQzE4MW9PtPn6yYRV59Ok_QH0o.jpg" alt="" /> <img id="pht3" class="pht" src="http://ekladata.com/u7kQT96fZE-P8QPtB8owycaM0Ic.jpg" alt="" /> <img id="pht4" class="pht" src="http://ekladata.com/nGEYgC-fCZbOPNhY_t2OgqBV00M.jpg" alt="" /> <img id="pht5" class="pht" src="http://ekladata.com/5qeLs2rntPzQbhYs8xobhI2f7QE.jpg" alt="" /> <img id="pht6" class="pht" src="http://ekladata.com/AE5YkeqMl1feCDiDQxri_PRyr_U.jpg" alt="" /> <img id="pht7" class="pht" src="http://ekladata.com/kuiMod7HL17OkwL4fGk0mKzuzWw.jpg" alt="" /> <img id="pht8" class="pht" src="http://ekladata.com/dWG_9xLaJNSK7rQHu99E8b5NAFI.jpg" alt="" /></div>
    <style><!--
    #pht0{position:absolute; z-index:1; width:10vw; font-size:1.5vw; text-align:left; color:brown; text-shadow:0.1vh 0.1vh black; transform:translate(4vw,0vw);}
    .pht{position:absolute; z-index:1; width:16vw; height:9vw; border:1vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; filter:sepia(1); transition:all 1s linear, filter 1s linear 1s;}
    #pht1{box-sizing:border-box; transform:translate(5vw,3vw) rotate(-10deg);}
    #pht2{box-sizing:border-box; transform:translate(15vw,12vw) rotate(0deg);}
    #pht3{box-sizing:border-box; transform:translate(23vw,2vw) rotate(10deg);}
    #pht4{box-sizing:border-box; transform:translate(41vw,3vw) rotate(-3deg);}
    #pht5{box-sizing:border-box; transform:translate(5vw,22vw) rotate(-5deg);}
    #pht6{box-sizing:border-box; transform:translate(22vw,24vw) rotate(0deg);}
    #pht7{box-sizing:border-box; transform:translate(35vw,13vw) rotate(-2deg);}
    #pht8{box-sizing:border-box; transform:translate(43vw,23vw) rotate(5deg);}
    #pht1:hover,#pht2:hover,#pht3:hover,#pht4:hover,#pht5:hover,#pht6:hover,#pht7:hover,#pht8:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg); filter:sepia(0);}
    --></style>