• Fredcloclo4

    Exemple au survol que je trouve plus pratique qu'au clic, qui demande un autre clic pour revenir en position de départ.

    Les images sont au ratio 1.5 (1000x667px), format de Fred.

    SURVOL


    <div style="width: 1000px; height: 667px; text-align: left; margin: 30px auto;"><img id="fd0" src="http://ekladata.com/9BaBnVrOB7RlweEjt00R0yqrR04.jpg" alt="" /> <img id="fd1" class="fd" src="http://ekladata.com/9BaBnVrOB7RlweEjt00R0yqrR04.jpg" alt="" /> <img id="fd2" class="fd" src="http://ekladata.com/IVuAOrlUGcLTqMws-uPppCiRJ78.jpg" alt="" /> <img id="fd3" class="fd" src="http://ekladata.com/60b501U5BLym7L0dsAcuHdrPD2I.jpg" alt="" /> <img id="fd4" class="fd" src="http://ekladata.com/60b501U5BLym7L0dsAcuHdrPD2I.jpg" alt="" />
    <p id="fd5">SURVOL</p>
    </div>

    <style><!--
    #fd0{position:absolute; z-index:1; box-sizing:border-box; width:1000px; height:667px; border:4px solid white;}
    .fd{position:absolute; z-index:1; width:150px; height:100px; border:4px solid white; transition:all 1s;}
    #fd1{box-sizing:border-box; transform:translate(600px,20px);}
    #fd2{box-sizing:border-box; transform:translate(800px,20px);}
    #fd3{box-sizing:border-box; transform:translate(600px,140px);}
    #fd4{box-sizing:border-box; transform:translate(800px,140px);}
    #fd5{position:absolute; z-index:1; width:140px; font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(50px,10px);}
    #fd1:hover,#fd2:hover,#fd3:hover,#fd4:hover{z-index:5; width:1000px; height:667px; transform:translate(0px,0px);}
    --></style>

    Le cadre du montage est en 1000x667px, taille des images et centré dans la page par margin:30px auto;

    Les images sont placées en position:absolute pour se placer les unes au dessus des autres.

    L'image fd0 est placée en fond.

    Les autres images sont dimensionnées par la class="fd" en vignettes dont la bordure est comprise dans la dimension par box-sizing:border-box;

    L'animation au survol agrandit les vignettes et les positionne en transform:translate(0px,0px); c'est à dire à l'angle haut/droit.

    Elles se positionnent au dessus des autres par z-index:5;