-
Exemple 11
10 images au ration 16/9; code long...!
Remplacez mes adresses images en bleu par les vôtres, en conservant le dimensionnement @1152x648
Survol
<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/xMp403OM3dkY4Z12VUmzcheAaVQ@1152x648.jpg'); background-size: cover;">
<p id="bor0">Survol</p>
<p id="bor1a"> </p>
<p id="bor1b"> </p>
<p id="bor2a"> </p>
<p id="bor2b"> </p>
<p id="bor3a"> </p>
<p id="bor3b"> </p>
<p id="bor4a"> </p>
<p id="bor4b"> </p>
<p id="bor5a"> </p>
<p id="bor5b"> </p>
<p id="bor6a"> </p>
<p id="bor6b"> </p>
<p id="bor7a"> </p>
<p id="bor7b"> </p>
<p id="bor8a"> </p>
<p id="bor8b"> </p>
<p id="bor9a"> </p>
<p id="bor9b"> </p>
<p id="bor10a"> </p>
<p id="bor10b"> </p>
</div>
<style><!--
#bor0{position:absolute; z-index:1; width:15vw; text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(22.5vw,16.5vw);}
#bor1a{position:absolute; z-index:1; width:10.5vw; height:10.5vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(9.75vw,4.75vw);}
#bor1b{position:absolute; z-index:2; width:10vw; height:10vw; background:url('http://ekladata.com/-3gY7i6NJHD1DfaJw-l10ze8XpU@1152x648.jpg');-webkit-clip-path: polygon(0 0, 100% 1%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(10vw,5vw); transition:all 1s linear;}
#bor2a{position:absolute; z-index:1; width:8.9vw; height:8.9vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(20.75vw,4.75vw);}
#bor2b{position:absolute; z-index:2; width:8.4vw; height:8.4vw; background:url('http://ekladata.com/MSDrg8pB-xHj7CyUp0sMjh-KjdA@1152x648.jpg');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(21vw,5vw); transition:all 1s linear;}
#bor3a{position:absolute; z-index:1; width:7.4vw; height:7.4vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(30vw,4.75vw);}
#bor3b{position:absolute; z-index:2; width:6.9vw; height:6.9vw; background:url('http://ekladata.com/hLGqTt7WPXxbFFUQfSs_A5ls9bY@1152x648.jpg');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(30.25vw,5vw); transition:all 1s linear;}
#bor4a{position:absolute; z-index:1; width:6.2vw; height:6.2vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(37.75vw,4.75vw);}
#bor4b{position:absolute; z-index:2; width:5.7vw; height:5.7vw; background:url('http://ekladata.com/5xMBmL-HuP5DWiz0wt7wFYM2egI@1152x648.jpg');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(38vw,5vw); transition:all 1s linear;}
#bor5a{position:absolute; z-index:1; width:5.1vw; height:5.1vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(44.25vw,4.75vw);}
#bor5b{position:absolute; z-index:2; width:4.6vw; height:4.6vw; background:url('http://ekladata.com/9AUGmyzUlWrvSA57Hcr7yBaBGsQ@1152x648.jpg');-webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); transform:translate(44.5vw,5vw); transition:all 1s linear;}
#bor6a{position:absolute; z-index:1; width:10.5vw; height:10.5vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(39.5vw,20vw);}
#bor6b{position:absolute; z-index:2; width:10vw; height:10vw; background:url('http://ekladata.com/O1JYxi1gHod-qIjuEs2kFlnx0eg@1152x648.jpg');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(39.75vw,20.25vw); transition:all 1s linear;}
#bor7a{position:absolute; z-index:1; width:8.9vw; height:8.9vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(30.25vw,21.75vw);}
#bor7b{position:absolute; z-index:2; width:8.4vw; height:8.4vw; background:url('http://ekladata.com/xbXGYOwThD_CPPC0koSl0MLYiAg@1152x648.jpg');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(30.5vw,22vw); transition:all 1s linear;}
#bor8a{position:absolute; z-index:1; width:7.4vw; height:7.4vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(22.5vw,23.25vw);}
#bor8b{position:absolute; z-index:2; width:6.9vw; height:6.9vw; background:url('http://ekladata.com/Y7_qeU2sX4fedz6eL4YJqj1_z3Y@1152x648.jpg');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(22.75vw,23.5vw); transition:all 1s linear;}
#bor9a{position:absolute; z-index:1; width:6.2vw; height:6.2vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(16vw,24.5vw);}
#bor9b{position:absolute; z-index:2; width:5.7vw; height:5.7vw; background:url('http://ekladata.com/5Iy4OSHOCsVGzjVAv9n6jIxWeUY@1152x648.jpg');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(16.25vw,24.75vw); transition:all 1s linear;}
#bor10a{position:absolute; z-index:1; width:5.1vw; height:5.1vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(10.5vw,25.50vw);}
#bor10b{position:absolute; z-index:2; width:4.6vw; height:4.6vw; background:url('http://ekladata.com/6x6EQmAeLwP-Mhe8wDjVy3gI9yo@1152x648.jpg');-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); transform:translate(10.75vw,25.75vw); transition:all 1s linear;}
#bor1b:hover,#bor2b:hover,#bor3b:hover,#bor4b:hover,#bor5b:hover,#bor6b:hover,#bor7b:hover,#bor8b:hover,#bor9b:hover,#bor10b:hover{z-index:5; width:60vw; height:33.75vw;-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); transform:translate(0vw,0vw);}
--></style>
montages par codes HTML/CSS
Créer mon blog