• Page d'essai

    De façon à vous faire partager mes bricolages, voici un montage adaptatif, avec survol des vignettes.

    Si vous modifiez la valeur en %  surlignée dans le code et que vous recopiiez ce code dans le code source d'un article d'essai, vous modifierez la taille de ce montage, tout en lui conservant ses proportions; vous pourrez ainsi vous rendre compte de l'essai sur différents médias. (par exemple, 30%/50%...)

    Je laisse le positionnement à gauche et de l'espace dessous afin de ne pas avoir à vous occuper du positionnement dans la page.

    Pour écrire avant et après le montage, il est souhaitable d'ajouter les lignes en rouge, dans le code.


    <p>...</p>

    <div id="r1">
    <p id="f3"><img id="r2" src="http://ekladata.com/8vfLZLC4wWnhSc9JyxGvFtrv-L0.jpg" alt="" /><img id="r3" class="vg" src="http://ekladata.com/3_ZIhv3a7YZyGZ4PVwK9zQpfZ5Q.jpg" alt="" /><img id="r4" class="vg" src="http://ekladata.com/MBk1jU5H8MixpcAS5Vs7J3MC3o0.jpg" alt="" /><img id="r5" class="vg" src="http://ekladata.com/LwE-eZ6wyY0GRoc0qRslU56FjZc.jpg" alt="" /><img id="r6" class="vg" src="http://ekladata.com/ihQNBpwb8yQruPJQcew39dSa1KY.jpg" alt="" /><img id="r7" class="vg" src="http://ekladata.com/SS3y8gCTeT5580JqFjli4LQuXcE.jpg" alt="" /></p>
    </div>

    <p>...</p>
    <style><!--
    #r1{margin:2% 2% 45% 0%;}
    #f3{position:relative; z-index:5; width:80%;}
    #r2{ position:absolute; z-index:1; width:100%; border:6px solid white; }
    .vg{position:absolute; width:12%; background-size:cover; border:2px solid white; transition:all 1s linear;}
    #r3{z-index:2;margin:2% 0% 0% 85%;}
    #r4{z-index:2;margin:12% 0% 0% 85%;}
    #r5{z-index:2;margin:22% 0% 0% 85%;}
    #r6{z-index:2;margin:32% 0% 0% 85%;}
    #r7{z-index:2;margin:42% 0% 0% 85%;}
    #r3:hover, #r4:hover, #r5:hover, #r6:hover, #r7:hover{width:100%; margin:0% 0% 0% 0%; z-index:10;border:6px solid white; }
    --></style>