• Principe 1

    J'ai pris quelques photos de fleurs et je vais vous proposer un montage avec différentes variantes, mais sur une structure, soit similaire, soit très proche.

    Dans cette première version, en 64vw/36vw, la vignette est remplie de la partie haut/gauche de la grande image par background:auto; valeur par défaut..

     

     

     

     

     

     

     

     

    Survolez
    chaque
    vignette.


    Pour respecter le ratio de 16/9, des images hébergées en 1920x1080px, le montage fait 64vw par 36vw; cependant, 64vw n'est pas divisible par 3 et chaque vignette ne fait que 21vw par 12vw.

    Les attributs communs sont placés dans une class(mt); en s'agrandissant, elles passent en 64vw par 36vw; chacune est placée en absolute (indépendante des autres, et chacune à son positionnement propre.

    La seule unité utilisée est le vw.


    <div style="width: 64vw; height: 36vw; margin: 0.1vw auto;">
    <p id="mt1" class="mt">&nbsp;</p>
    <p id="mt2" class="mt">&nbsp;</p>
    <p id="mt3" class="mt">&nbsp;</p>
    <p id="mt4" class="mt">&nbsp;</p>
    <p id="mt5" class="mt">&nbsp;</p>
    <p id="mt6" class="mt">&nbsp;</p>
    <p id="mt7" class="mt">&nbsp;</p>
    <p id="mt8" class="mt">&nbsp;</p>
    <p id="mt9" class="mt">Survolez<br />chaque<br />vignette.</p>
    </div>

    <style><!--
    .mt{position:absolute; z-index:1; width:21vw; height:12vw; box-sizing:border-box; border:0.2vw solid white;transition:all 1s linear;}
    #mt1{ background:url('http://ekladata.com/uMPqdvkvPiPLeKF4V6mb6R2dTUc.jpg');background-size:64vw 36vw; background:auto; transform:translate(0vw,0vw);}
    #mt2{ background:url('http://ekladata.com/Z9jEsHoSLRCBLpPMzMq4y4yOjN0.jpg');background-size:64vw 36vw; background:auto; transform:translate(21vw,0vw);}
    #mt3{ background:url('http://ekladata.com/U3ZY-TgssA52SfyX-6UGvTDZdtA.jpg');background-size:64vw 36vw; background:auto; transform:translate(42vw,0vw);}
    #mt4{ background:url('http://ekladata.com/qxwX_SEt9G_ogodiygs1FhD6oyE.jpg');background-size:64vw 36vw; background:auto; transform:translate(42vw,12vw);}
    #mt5{ background:url('http://ekladata.com/tsRF8JD3d17I9b51gCAOp41sk1A.jpg');background-size:64vw 36vw; background:auto; transform:translate(42vw,24vw);}
    #mt6{ background:url('http://ekladata.com/44GyN5DHmQH4DFGzzjtr56XBZLE.jpg');background-size:64vw 36vw; background:auto; transform:translate(21vw,24vw);}
    #mt7{ background:url('http://ekladata.com/-BCSFlpucfy8i5nEuq71MCqhz4c.jpg');background-size:64vw 36vw; background:auto; transform:translate(0vw,24vw);}
    #mt8{ background:url('http://ekladata.com/35Phnq_dIdigmM-FzcpMXb66iXU.jpg');background-size:64vw 36vw; background:auto; transform:translate(0vw,12vw);}
    #mt9{ background:linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%); text-align:center; font-size:2vw; line-height:4w; color:white; text-shadow:0.1vw 0.1vw black; transform:translate(21vw,12vw);}

    #mt1:hover,#mt2:hover,#mt3:hover,#mt4:hover,#mt5:hover,#mt6:hover,#mt7:hover,#mt8:hover{z-index:10; width:64vw; height:36vw; transform:translate(0vw,0vw);}
    --></style>