• Frise 2

    Même principe que Frise 1 mais avec une commande au clic maintenu et un agrandissement centré plus réduit.

    Toujours la possibilité de conserver l'affichage de l'image agrandie en déplaçant votre souris dessus, clic maintenu.

    Mon blog est paramétré avec les éléments centrés et je dois ajouter text-align:left; pour que la référence soit le côté gauche de ma page: CE N'EST PEUT-ÊTRE PAS VOTRE CAS.

    <div style="width: 60vw; height: 8vw;  text-align: left; margin:1vh auto;">
    <img id="dis1" class="dis" src="http://ekladata.com/YmQYB0uelJtANifszQg0AEPcDT0.jpg" alt="" />
    <img id="dis2" class="dis" src="http://ekladata.com/2VZVbaYrxN-lvzwLD_mBmAoxzW8.jpg" alt="" />
    <img id="dis3" class="dis" src="http://ekladata.com/Bqgwsdb4aako8d7IeirX7bBE5mM.jpg" alt="" />
    <img id="dis4" class="dis" src="http://ekladata.com/NWqSelXeSICFY74MGBGnrW_AuFo.jpg" alt="" />
    <img id="dis5" class="dis" src="http://ekladata.com/CHqnarDoERsvKWoyaZ0hFV-lzG4.jpg" alt="" />
    <img id="dis6" class="dis" src="http://ekladata.com/7PjW1c8mECaTXomLOtehwL4t9Yw.jpg" alt="" />
    <img id="dis7" class="dis" src="http://ekladata.com/Bti8FU3x4eQVOwPFdYWOgqXu6MU.jpg" alt="" />
    </div>
    <style><!--
    .dis{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.4vh solid white; transition:all 1s linear;}
    #dis1{box-sizing:border-box; transform:translate(0vw,2vw) skewy(20deg);}
    #dis2{box-sizing:border-box; transform:translate(8vw,2vw) skewy(-20deg);}
    #dis3{box-sizing:border-box; transform:translate(16vw,2vw) skewy(20deg);}
    #dis4{box-sizing:border-box; transform:translate(24vw,2vw) skewy(-20deg);}
    #dis5{box-sizing:border-box; transform:translate(32vw,2vw) skewy(20deg);}
    #dis6{box-sizing:border-box; transform:translate(40vw,2vw) skewy(-20deg);}
    #dis7{box-sizing:border-box; transform:translate(48vw,2vw) skewy(20deg);}
    #dis1:active,#dis2:active,#dis3:active,#dis4:active,#dis5:active,#dis6:active,#dis7:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) skewy(0deg); margin:0vw auto;}
    --></style>

    L'image s'agrandit à partir de l'angle haut/gauche du montage.

    Si vous souhaitez que l'image monte dans votre page, à l'agrandissement, modifiez la valeur transform:translate(0vw,0vw) en transform:translate(0vw,-5vw), par exemple.