• EliD.17.4.21

    Deux façons d'agrandir les images:

    soit la vignette affiche l'image totale en petit et l'image s'agrandit en animation,

    soit la vignette affiche la partie de la grande image en fonction de sa position.

    Survol

     

     

     

    ********************


    <div style="width: 1000px; height: 562px; margin: 10px auto; text-align: left;">
    <p id="mat0a">Survol</p>
    <p id="mat1a" class="mat">&nbsp;</p>
    <p id="mat2a" class="mat">&nbsp;</p>
    <p id="mat3a" class="mat">&nbsp;</p>
    </div>
    <style><!--
    #mat0a{position:absolute; z-index:1; width:100px; font-size:30px; transform:translate(750px,0px);}
    .mat{position:absolute; z-index:1; width:320px; height:180px; border:6px ridge white; transition:all 1s linear;}
    #mat1a{background:url('http://ekladata.com/WUa4GSL_MFOMjpNw8VUBeAjXtlU.jpg'); background-size:cover; transform:translate(50px, 50px);}
    #mat2a{background:url('http://ekladata.com/zyzAfSpyVpVmgMd2XeIld6lm4nU.jpg'); background-size:cover; transform:translate(300px, 150px);}
    #mat3a{background:url('http://ekladata.com/UbPLV7Jms6JNMY7sQk_qDp8PV2o.jpg'); background-size:cover; transform:translate(600px, 250px);}
    #mat1a:hover,#mat2a:hover,#mat3a:hover{z-index:5; width:1000px; height:562px; transform:translate(0px,0px);}
    --></style>

    ********************

    Survol

     

     

     

    ********************


    <div style="width: 1000px; height: 562px; margin: 10px auto; text-align: left;">
    <p id="mat0b">Survol</p>
    <p id="mat1b" class="matb">&nbsp;</p>
    <p id="mat2b" class="matb">&nbsp;</p>
    <p id="mat3b" class="matb">&nbsp;</p>
    </div>
    <style><!--
    #mat0b{position:absolute; z-index:1; width:100px; font-size:30px; transform:translate(750px,0px);}
    .matb{position:absolute; z-index:1; width:320px; height:180px; border:6px ridge white; transition:all 1s linear;}
    #mat1b{background:url('http://ekladata.com/WUa4GSL_MFOMjpNw8VUBeAjXtlU.jpg'); background-size:1000px 562px; background-position:-50px -50px; transform:translate(50px, 50px);}
    #mat2b{background:url('http://ekladata.com/zyzAfSpyVpVmgMd2XeIld6lm4nU.jpg'); background-size:1000px 562px; background-position:-300px -150px; transform:translate(300px, 150px);}
    #mat3b{background:url('http://ekladata.com/UbPLV7Jms6JNMY7sQk_qDp8PV2o.jpg'); background-size:1000px 562px; background-position:-600px -250px; transform:translate(600px, 250px);}
    #mat1b:hover,#mat2b:hover,#mat3b:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>