• Exemple 107

     L'avantage des unités % est qu'une fois le cadre défini, les sélections s'adaptent; ainsi, mon code publié est en 80vw/45vw et le code proposé est en 60vw/33.75vw (60% de la largeur de votre écran) en ne modifiant que les codes surlignés en jaune; 8 images au ratio 16/9, sur mon retour du marché... "avec mon p'tit panier sous mon bras..."

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="ayg0">Survol</p>
    <p id="ayg1" class="ayg">&nbsp;</p>
    <p id="ayg2" class="ayg">&nbsp;</p>
    <p id="ayg3" class="ayg">&nbsp;</p>
    <p id="ayg4" class="ayg">&nbsp;</p>
    <p id="ayg5" class="ayg">&nbsp;</p>
    <p id="ayg6" class="ayg">&nbsp;</p>
    <p id="ayg7" class="ayg">&nbsp;</p>
    <p id="ayg8" class="ayg">&nbsp;</p>
    </div>
    <style><!--
    #ayg0{position:absolute; z-index:1; width:10vw; font-size:2vw; color:brown; text-shadow:0.1vh 0.1vh black; transform:translate(25vw,15vw);}
    .ayg{position:absolute; z-index:1; width:60vw; height:33.55vw; background-size:60vw 33.75vw; transition:all 1s linear;}
    #ayg1{clip-path:polygon(10% 5%, 30% 5%, 25% 40%, 15% 40%); background:url('http://ekladata.com/NZo3MKcM3rY5fgWvRowckG8tqXc.jpg');}
    #ayg2{clip-path:polygon(35% 5%, 45% 5%, 50% 40%, 30% 40%); background:url('http://ekladata.com/dAzPlmV86zmH4r-1eD3uxFfCeHw.jpg');}
    #ayg3{clip-path:polygon(50% 5%, 70% 5%, 65% 40%, 55% 40%); background:url('http://ekladata.com/OUdcGokRO4jDKEsbUlDsHx_N4z4.jpg');}
    #ayg4{clip-path:polygon(75% 5%, 85% 5%, 90% 40%, 70% 40%); background:url('http://ekladata.com/y5H8ylsGifxTEN6XPgK6feWdVlY.jpg');}
    #ayg5{clip-path:polygon(15% 55%, 25% 55%, 30% 95%, 10% 95%); background:url('http://ekladata.com/XpX26neVdR8nhS2_QffmKdGscFQ.jpg');}
    #ayg6{clip-path:polygon(30% 55%, 50% 55%, 45% 95%, 35% 95%); background:url('http://ekladata.com/a4sZ1g53uq6v3kjB7aScoTYwvcI.jpg');}
    #ayg7{clip-path:polygon(55% 55%, 65% 55%, 70% 95%, 50% 95%); background:url('http://ekladata.com/ctr0XQ6t478Tj0TIfzs55Hy4DX8.jpg');}
    #ayg8{clip-path:polygon(70% 55%, 90% 55%, 85% 95%, 75% 95%); background:url('http://ekladata.com/YkR9eDzf2bM5jWctHJhmDueQQJk.jpg');}
    #ayg1:hover,#ayg2:hover,#ayg3:hover,#ayg4:hover,#ayg5:hover,#ayg6:hover,#ayg7:hover,#ayg8:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    --></style>