• Montage 72

    Le principe est de créer un cadre au montage avec, en fond, une couleur ou une texture particulière.

    Au centre de ce cadre, nous plaçons un autre cadre, plus petit, avec, en fond, une couleur ou une texture différente.

    Dans ce second cadre, nous plaçons les images en indépendantes pour les positionner hors du cadre central et sur les zones visibles du cadre principal du montage.

    Au clic maintenu, ces images s'agrandiront au dessus du second cadre pour remplir le montage.

    Dans le second cadre, nous écrivons notre article (texte, images animées ou non, vidéos, liens...)

     

    Une façon de présenter texte et images.
    Clic maintenu sur chaque vignette.
    ....

    <div style="width: 60vw; height: 33.75vw; text-align: left; border: 0.1vh solid black; margin: 1vh auto; background: linear-gradient(to bottom,rgba(150,100,50,0.8) 0%,rgba(150,100,50,0.2) 100%);">
    <div id="width:40vw; height:33.75vw; background: linear-gradient(to bottom,rgba(50,100,50,0.8) 0%,rgba(50,100,50,0.2) 100%; transform:translate(10vw,0vw);"><img id="mg1" class="mg" src="http://ekladata.com/_IJaXXA2bozW-EFEMuixTY1lJ_o.jpg" alt="" /><img id="mg2" class="mg" src="http://ekladata.com/fntW7wC91jzCoVh5nwNJzVf0ojY.jpg" alt="" /><img id="mg3" class="mg" src="http://ekladata.com/c_UE3IYlubb1FTCd8R6WtGowhXE.jpg" alt="" /><img id="mg4" class="mg" src="http://ekladata.com/2CGbP2Xp2fRP9B8p5fnOxZxqwD8.jpg" alt="" /><img id="mg5" class="mg" src="http://ekladata.com/LLz1zE_sthXZ4ISN7km2-PnS1T0.jpg" alt="" /><img id="mg6" class="mg" src="http://ekladata.com/YYedaV8YwLBHzyo81m2VMd7ohD8.jpg" alt="" /><img id="mg7" class="mg" src="http://ekladata.com/XdMwDFi-caEqr_YVqav9i7IKDh4.jpg" alt="" /><img id="mg8" class="mg" src="http://ekladata.com/Gvv8dGJg8ePwhDasw_5tf_8XVy8.jpg" alt="" /><img id="mg9" class="mg" src="http://ekladata.com/QPiPtzeXPVXSXNAl0DGANGn8c6Q.jpg" alt="" /><img id="mg10" class="mg" src="http://ekladata.com/YualRNEc2sBTfn47dtVoT5Ep5sI.jpg" alt="" /><img id="mg11" class="mg" src="http://ekladata.com/4QzAwDRRJPafVJRWC5wIEHKIXtg.jpg" alt="" /><img id="mg12" class="mg" src="http://ekladata.com/okRU89dnbwpNYFK6SN38U0OPiME.jpg" alt="" />
    <p id="cent">Une fa&ccedil;on de pr&eacute;senter texte et images.<br /><span style="background-color: #00ffff;">Clic maintenu sur chaque vignette.</span><br />....</p>
    </div>
    </div>

    <style><!--
    #cent{position:absolute; z-index:1; box-sizing:border-box; width:44vw; height:33.75vw; padding:1vh; border:0.1vh solid black; text-align:center; transform:translate(8vw,0vw); background:linear-gradient(to bottom,rgba(50,100,50,0.7) 0%, rgba(150,100,50,0.3)100%);}
    .mg{position:absolute; z-index:2; width:6vw; height:3.375vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #mg1{transform:translate(1vw,2vw); box-sizing:border-box;}
    #mg2{transform:translate(1vw,7vw); box-sizing:border-box;}
    #mg3{transform:translate(1vw,12vw); box-sizing:border-box;}
    #mg4{transform:translate(1vw,17vw); box-sizing:border-box;}
    #mg5{transform:translate(1vw,22vw); box-sizing:border-box;}
    #mg6{transform:translate(1vw,27vw); box-sizing:border-box;}
    #mg7{transform:translate(53vw,2vw); box-sizing:border-box;}
    #mg8{transform:translate(53vw,7vw); box-sizing:border-box;}
    #mg9{transform:translate(53vw,12vw); box-sizing:border-box;}
    #mg10{transform:translate(53vw,17vw); box-sizing:border-box;}
    #mg11{transform:translate(53vw,22vw); box-sizing:border-box;}
    #mg12{transform:translate(53vw,27vw); box-sizing:border-box;}
    #mg1:active,#mg2:active,#mg3:active,#mg4:active,#mg5:active,#mg6:active,#mg7:active,#mg8:active,#mg9:active,#mg10:active,#mg11:active,#mg12:active{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    --></style>