• Un survol

    Le survol a l'inconvénient de ne pas permettre une animation qui se déplace afin que le curseur reste sur l'élément animé.

    Je vais donc faire une sélection sur l'image pour que l'image agrandie le soit à partir de la partie visible de l'image.

    La position indépendante (absolute) a l'inconvénient d'être apparente même lorsque l'article n'est pas appelé (dans la liste des articles).

    Voici donc un montage en page indépendante.

    Le positionnement par left/top a l'inconvénient de prendre en référence les bords de l'écran, quel qu'il soit et comme la structure de chacun est différente...

    N'ayant pas de rubrique latérale à gauche, je vais prendre en référence le bord droit de ma page pour positonner les éléments.

    Survolez chaque partie d'image.

     

     

     

     

     

     


    <div style="width: 70vw; height: 17vw; text-align: left; margin: 0.1vh 0;">
    <p id="sel1" class="sel">&nbsp;</p>
    <p id="sel2" class="sel">&nbsp;</p>
    <p id="sel3" class="sel">&nbsp;</p>
    <p id="sel4" class="sel">&nbsp;</p>
    <p id="sel5" class="sel">&nbsp;</p>
    <p id="sel6" class="sel">&nbsp;</p>
    </div>
    <style><!--
    .sel{position:absolute; z-index:1; width:8vw; height:16vw;  transition:all 1.5s linear; border:0.4vh ridge white; box-shadow:0.4vh 0.4vh 0.6vh black;}
    #sel1{background:url('http://ekladata.com/uIaY--FXgtvVSK7QWklZ3dddjE0.jpg'); background-position:-2vw -27vw; background-size:100vw 56.52vw;left:2vw; top:27vw;}
    #sel2{background:url('http://ekladata.com/yZUXXNAvn-QooyLqsqrqSDr9EmE.jpg'); background-position:-13vw -27vw; background-size:100vw 56.52vw;left:13vw; top:27vw;}
    #sel3{background:url('http://ekladata.com/8gQqUKn6vqvuORtM7nvTGVgdtk8.jpg'); background-position:-24vw -27vw; background-size:100vw 56.52vw;left:24vw; top:27vw;}
    #sel4{background:url('http://ekladata.com/gyo5Ujd4Qvem5HOAFGgl6_SWSRc.jpg'); background-position:-35vw -27vw; background-size:100vw 56.52vw;left:35vw; top:27vw;}
    #sel5{background:url('http://ekladata.com/zr36lgGvg_P0N0krCdbiqdXaZ84.jpg'); background-position:-46vw -27vw; background-size:100vw 56.52vw;left:46vw; top:27vw;}
    #sel6{background:url('http://ekladata.com/wOQFb15mWgRZ8GEbmE6Mk72AHLY.jpg'); background-position:-57vw -27vw; background-size:100vw 56.52vw;left:57vw; top:27vw;}
    #sel1:hover,#sel2:hover,#sel3:hover,#sel4:hover,#sel5:hover,#sel6:hover{z-index:100; left:0; top:0; width:100vw; height:56.25vw; background-position:0vw 0vw; border:none; box-shadow:none;}
    --></style>