• Exemple 77

    Survol vignettes. Ce genre de code est très facile à adapter en dimensions.

     

     

     

     

     

     

     

     

    <div style="width:60vw; height:33.75vw; margin:1vh auto; border:0.1vh solid black; text-align:left; background:url('http://ekladata.com/FTTUlsnw_fXyGJLOx1B4Y5Hkslw@1152x648.jpg'); background-size:cover;">
    <p id="bv1" class="bv">&nbsp;</p>
    <p id="bv2" class="bv">&nbsp;</p>
    <p id="bv3" class="bv">&nbsp;</p>
    <p id="bv4" class="bv">&nbsp;</p>
    <p id="bv5" class="bv">&nbsp;</p>
    <p id="bv6" class="bv">&nbsp;</p>
    <p id="bv7" class="bv">&nbsp;</p>
    <p id="bv8" class="bv">&nbsp;</p>
    </div>

    <style><!--
    .bv{position:absolute; z-index:1; width:60vw; height:33.75vw; transition:all 2s linear;}
    #bv1{background:url('http://ekladata.com/OwZVVJbfaSuCJo-N391pNTZJgFA@1152x648.jpg'); clip-path:circle(5% at 10% 10%);}
    #bv2{background:url('http://ekladata.com/b1Fb5hrtSOhulWUA6btJt0LNqes@1152x648.jpg'); clip-path:circle(5% at 10% 30%);}
    #bv3{background:url('http://ekladata.com/ipwNDBbdLJiX2Bro-zRCqSwHD3I@1152x648.jpg'); clip-path:circle(5% at 10% 50%);}
    #bv4{background:url('http://ekladata.com/zrfF_hF-Sx1GckJaNO-IXD8DRRg@1152x648.jpg'); clip-path:circle(5% at 10% 70%);}
    #bv5{background:url('http://ekladata.com/XitumG5mRMSLEbrgeLhfLGOdvU8@1152x648.jpg'); clip-path:circle(5% at 90% 10%);}
    #bv6{background:url('http://ekladata.com/vhc2ZKkNZAPKTSA1SnpS7Y3bzds@1152x648.jpg'); clip-path:circle(5% at 90% 30%);}
    #bv7{background:url('http://ekladata.com/ZR7mTfoOVMjSiYQdIn_X9l4E10g@1152x648.jpg'); clip-path:circle(5% at 90% 50%);}
    #bv8{background:url('http://ekladata.com/k3KcbdoeHaO6sYjyLgVGh_QiNGs@1152x648.jpg'); clip-path:circle(5% at 90% 70%);}
    #bv1:hover,#bv2:hover,#bv3:hover,#bv4:hover,#bv5:hover,#bv6:hover,#bv7:hover,#bv8:hover{z-index:5; clip-path:circle(100% at 50% 50%);}
    --></style>