• Exemple 90

    Je trouve plus pratique d'utiliser des paragraphes avec une image de fond positionnée (background-position) que d'utiliser des clip-path (découpe dans l'image). Survol.

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto; border: 1px solid black; background: url('http://ekladata.com/_6gLodYQBpdKhrezEpgS_t7tLz4.jpg'); background-size: 1000px 563px; text-align: left;">
    <p id="plc1" class="plc">&nbsp;</p>
    <p id="plc2" class="plc">&nbsp;</p>
    <p id="plc3" class="plc">&nbsp;</p>
    <p id="plc4" class="plc">&nbsp;</p>
    <p id="plc5" class="plc">&nbsp;</p>
    </div>

    <style><!--
    .plc{position:absolute; z-index:1; border:4px solid white; background:size:1000px 563px; transition:all 1s linear;}
    #plc1{width:150px; height:200px; border-radius:50%; background:url('http://ekladata.com/fCemqwUwsVYsWhS9i-KsMwd6fsw.jpg'); background-position:-50px -100px; transform:translate(50px,100px);}
    #plc2{width:250px; height:100px; border-radius:50%; background:url('http://ekladata.com/-Y6tT2QwACo2_mvFckjviHj10KM.jpg'); background-position:-300px -100px; transform:translate(300px,100px);}
    #plc3{width:200px; height:200px; background:url('http://ekladata.com/risx3yhqd3Aqdha-juH4qabRwl0.jpg'); background-position:-250px -300px; transform:translate(250px,300px) skewx(25deg);}
    #plc4{width:150px; height:250px; border-radius:25%; background:url('http://ekladata.com/wFMgyunTdx3xtxt29ho5X9N_K_A.jpg'); background-position:-550px -200px; transform:translate(550px,200px);}
    #plc5{width:100px; height:200px; background:url('http://ekladata.com/544I6iqHMZkPZ0Co5oN-e_z0NaY.jpg'); background-position:-750px -50px; transform:translate(750px,50px);}
    #plc1:hover,#plc2:hover,#plc3:hover,#plc4:hover,#plc5:hover{z-index:5; width:1000px; height:563px; border-radius:0%; border:none; background-size:1000px 563px; background-position:0px 0px; transform:translate(0px,0px) skewx(0deg);}
    --></style>