• Album photos A

    Merci aux fidèles lectrices qui m'ont fait des remarques sur ce montage.

    Melofaroh m'a fait rectifier des erreurs de valeurs,

    Noisette et Loneci préfèrent les montages plus animés que la version de base proposée.

    Alors, en ajoutant quelques attributs, on peut proposer des formes et animations au départ ou à l'arrivée, ce qui va ma permettre de vous proposer quelques versions sur le même principe.

    Le montage est positionné, chez moi, avec un espace au dessus de 15vw pour que l'agrandissement se fasse au dessus du petit texte de présentation; si ce montage est placé sous votre article assez long, vous modifierez cet espace.

    Ajout d'un filtre noir et blanc qui passe à la couleur au clic maintenu.

    Ajout d'une rotation au clic maintenu.

    Ajout d'un arrondi au clic maintenu.

    <div style="width: 60vw; height: 13.5vw; margin: 15vw auto 1vw auto; text-align: left;">
    <p style="width: 60vw; height: 13.5vw;"><img id="vad1" class="vad" src="http://ekladata.com/lwI3v-a2cQDC_DwhzwXAJMfXtuQ.jpg" alt="" /><img id="vad2" class="vad" src="http://ekladata.com/4F-_ASuY0eAGZhbzPbunjEvm3yU.jpg" alt="" /><img id="vad3" class="vad" src="http://ekladata.com/5ZYCYkI3PRDRTm-x0-yrJzI_bj0.jpg" alt="" /><img id="vad4" class="vad" src="http://ekladata.com/YkFc1QsJmL9p_uNqDM_ER5Lw8KQ.jpg" alt="" /><img id="vad5" class="vad" src="http://ekladata.com/twAFJE63wiLJcF6lNla64KwsF6Y.jpg" alt="" /><img id="vad6" class="vad" src="http://ekladata.com/QS7B20dxPZn632vQ7o6wQrO_QAs.jpg" alt="" /><img id="vad7" class="vad" src="http://ekladata.com/3NYdKVf5n67NzlcOUI35BKRgCwc.jpg" alt="" /><img id="vad8" class="vad" src="http://ekladata.com/1hJMtwksF8t3z2Fh3AaN7g9zKdc.jpg" alt="" /><img id="vad9" class="vad" src="http://ekladata.com/TU2eQbyuasr4IuZxYMEo76GafMY.jpg" alt="" /><img id="vad10" class="vad" src="http://ekladata.com/BwzvyPgXq5g9QJ0y9te_RCfrVZA.jpg" alt="" /></p>
    </div>

    <style><!--
    .vad{position:absolute; z-index:1; width:12vw; height:6.75vw; border:0.4vh solid white; filter:grayscale(1); -webkit-filter:grayscale(1); transition:all 1s linear;}
    #vad1{transform:translate(0vw,0vw) rotatex(180deg); box-sizing:border-box;}
    #vad2{transform:translate(12vw,0vw) rotatex(180deg);box-sizing:border-box; }
    #vad3{transform:translate(24vw,0vw) rotatex(180deg); box-sizing:border-box;}
    #vad4{transform:translate(36vw,0vw) rotatex(180deg); box-sizing:border-box;}
    #vad5{transform:translate(48vw,0vw) rotatex(180deg); box-sizing:border-box;}
    #vad6{transform:translate(0vw,6.75vw) rotatex(180deg); box-sizing:border-box;}
    #vad7{transform:translate(12vw,6.75vw) rotatex(180deg); box-sizing:border-box;}
    #vad8{transform:translate(24vw,6.75vw) rotatex(180deg); box-sizing:border-box; }
    #vad9{transform:translate(36vw,6.75vw) rotatex(180deg); box-sizing:border-box; }
    #vad10{transform:translate(48vw,6.75vw) rotatex(180deg); box-sizing:border-box; }
    #vad1:active,#vad2:active,#vad3:active,#vad4:active,#vad5:active,#vad6:active,#vad7:active,#vad8:active,#vad9:active,#vad10:active{z-index:5; width:60vw; height:33.75vw; border-radius:50%; filter:grayscale(0); -webkit-filter:grayscale(0); transform:translate(0vw,-20vw) rotatex(0deg);}
    --></style>