• Art.18c.7.21

    Pas très souriant  le personnage ! 4 images au ratio 16/9.

    Survol yeux, nez et bouche.

    *************
    <div style="width: 1000px; height: 562px; border: 1px solid black; margin: 20px auto; text-align: left; background: radial-gradient(ellipse at center, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);"><img id="cp1" class="cp" src="http://ekladata.com/6EGIHYVmV_jayXETvyNMVmQUZ9Q@1000x562.jpg" alt="" /> <img id="cp2" class="cp" src="http://ekladata.com/xfvXZejg5FveS9mCVwvGoRaudss@1000x562.jpg" alt="" /> <img id="cp3" class="cp" src="http://ekladata.com/zpU6dghZZAKwDpRVRPZoU_L-OU4@1000x562.jpg" alt="" /> <img id="cp4" class="cp" src="http://ekladata.com/d9q7jhiD1q6_vwLq4hCpvludMK0@1000x562.jpg" alt="" /> <span id="vis1">Survol yeux, nez et bouche.</span></div>

    <style><!--
    #vis1{position:absolute; z-index:1; width:100px; font-size:22px; transform:translate(20px,20px);}
    .cp{position:absolute; z-index:1 width:1000px; height:562px; transition:all 2s;}
    #cp1{clip-path: ellipse(10% 10% at 30% 20%);}
    #cp2{clip-path: ellipse(10% 10% at 70% 20%);}
    #cp3{clip-path: ellipse(5% 20% at 50% 50%);}
    #cp4{clip-path: ellipse(17% 5% at 50% 85%);}
    #cp1:hover,#cp2:hover,#cp3:hover,#cp4:hover{z-index:5; clip-path:ellipse(100% 100% at 50% 50%);}
    --></style>