• Le buis

    Survol lettres

    A

    B

    C

    D

    E

    F

    G

    H

    J

    K

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.3vh ridge white; margin: 2vh auto; background: url('http://ekladata.com/y6AlIaVnYcYa4wEfPsDIuQTsN3U.jpg'); background-size: 60vw 33.75vw; overflow: hidden;">
    <p id="surv">Survol lettres</p>
    <p id="A" class="let">A</p>
    <p id="B" class="let">B</p>
    <p id="C" class="let">C</p>
    <p id="D" class="let">D</p>
    <p id="E" class="let">E</p>
    <p id="F" class="let">F</p>
    <p id="G" class="let">G</p>
    <p id="H" class="let">H</p>
    <p id="J" class="let">J</p>
    <p id="K" class="let">K</p>
    <p id="A1" class="let1">&nbsp;</p>
    <p id="B1" class="let1">&nbsp;</p>
    <p id="C1" class="let1">&nbsp;</p>
    <p id="D1" class="let1">&nbsp;</p>
    <p id="E1" class="let1">&nbsp;</p>
    <p id="F1" class="let1">&nbsp;</p>
    <p id="G1" class="let1">&nbsp;</p>
    <p id="H1" class="let1">&nbsp;</p>
    <p id="J1" class="let1">&nbsp;</p>
    <p id="K1" class="let1">&nbsp;</p>
    <p id="lps1" class="lpsa">&nbsp;</p>
    <p id="lps2" class="lpsa">&nbsp;</p>
    </div>

    <style><!--
    #surv{position:absolute; z-index:1; width:15vw; background:rgba(0,0,0,0.5); text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
    .let{position:absolute; z-index:1; width:2vw; height:2vw; background:rgba(0,0,0,0.5); text-align:center; line-height:2vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
    #A{transform:translate(20vw,0vw);}
    #B{transform:translate(23vw,0vw);}
    #C{transform:translate(26vw,0vw);}
    #D{transform:translate(29vw,0vw);}
    #E{transform:translate(32vw,0vw);}
    #F{transform:translate(35vw,0vw);}
    #G{transform:translate(38vw,0vw);}
    #H{transform:translate(41vw,0vw);}
    #J{transform:translate(44vw,0vw);}
    #K{transform:translate(47vw,0vw);}
    .let1{position:absolute; z-index:10; width:2vw; height:2vw; background:transparent;}
    #A1{transform:translate(20vw,0vw);}
    #B1{transform:translate(23vw,0vw);}
    #C1{transform:translate(26vw,0vw);}
    #D1{transform:translate(29vw,0vw);}
    #E1{transform:translate(32vw,0vw);}
    #F1{transform:translate(35vw,0vw);}
    #G1{transform:translate(38vw,0vw);}
    #H1{transform:translate(41vw,0vw);}
    #J1{transform:translate(44vw,0vw);}
    #K1{transform:translate(47vw,0vw);}

    .lpsa{position:absolute; z-index:3; width:30vw; height:33.75vw; background:url('http://ekladata.com/brqCmM-yXrKGJKyD_-_Dm-9wIaI.jpg'); background-size:60vw 33.75vw;}
    #lps1{ transform:translate(0vw,0vw) perspective(30vw) rotatey(90deg); transform-origin:center left; transition:all 1s linear;}
    #lps2{ transform:translate(30vw,0vw) perspective(30vw) rotatey(-90deg); transform-origin:center right; transition:all 1s linear;}

    #A1:hover ~ .lpsa{background:url('http://ekladata.com/brqCmM-yXrKGJKyD_-_Dm-9wIaI.jpg');background-size:60vw 33.75vw;}
    #B1:hover ~ .lpsa{background:url('http://ekladata.com/UIC9ItYwMzGwpzBBfo5F1uanWLc.jpg');background-size:60vw 33.75vw;}
    #C1:hover ~ .lpsa{background:url('http://ekladata.com/iZThLnm9QK_fnuulRfKfgwvfknw.jpg');background-size:60vw 33.75vw;}
    #D1:hover ~ .lpsa{background:url('http://ekladata.com/WWWKNL2vCoWrfL0Pi_zVK3dtGv0.jpg');background-size:60vw 33.75vw;}
    #E1:hover ~ .lpsa{background:url('http://ekladata.com/6bmJeiNRqcGvnVTFkLsVIG4O94M.jpg');background-size:60vw 33.75vw;}
    #F1:hover ~ .lpsa{background:url('http://ekladata.com/jxrQ13BT-amCVEYIn7Ab3eumnF4.jpg');background-size:60vw 33.75vw;}
    #G1:hover ~ .lpsa{background:url('http://ekladata.com/bhTBFWRHvG_K65u7lnN_ejcSgN4.jpg');background-size:60vw 33.75vw;}
    #H1:hover ~ .lpsa{background:url('http://ekladata.com/XqOxtpE_BStMQeWV_8fS_uBx72c.jpg');background-size:60vw 33.75vw;}
    #J1:hover ~ .lpsa{background:url('http://ekladata.com/8kAkLmcKiuuQ4A0cv2qx47iCSto.jpg');background-size:60vw 33.75vw;}
    #K1:hover ~ .lpsa{background:url('http://ekladata.com/Cp0xTGMe5yHJY65f6zGuPHDTHV4.jpg');background-size:60vw 33.75vw;}

    #A1:hover ~ #lps1,#B1:hover ~ #lps1,#C1:hover ~ #lps1,#D1:hover ~ #lps1,#E1:hover ~ #lps1,#F1:hover ~ #lps1,#G1:hover ~ #lps1,#H1:hover ~ #lps1,#J1:hover ~ #lps1,#K1:hover ~ #lps1{z-index:5;background-position:0vw 0vw; transform:translate(0vw,0vw) perspective(200vw) rotatey(0deg);}
    #A1:hover ~ #lps2,#B1:hover ~ #lps2,#C1:hover ~ #lps2,#D1:hover ~ #lps2,#E1:hover ~ #lps2,#F1:hover ~ #lps2,#G1:hover ~ #lps2,#H1:hover ~ #lps2,#J1:hover ~ #lps2,#K1:hover ~ #lps2{z-index:5;background-position:-30vw 0vw; transform:translate(30vw,0vw) perspective(200vw) rotatey(0deg);}
    --></style>

    Le code est bien long mais très répétitif; une raison de sa longueur est le fait que j'ai ajouté des boutons invisibles au dessus de chaque bouton afin que les boutons soient invisibles lorsque l'image s'affiche.

    Je propose cependant un code avec 2 volets plutôt qu'avec 4, pour simplifier.

    Les deux parties (#lps1 et #lmp2) qui se referment dans l'animation sont la moitié d'une même image: .lpsa.

    Chacune reprend la partie gauche (background-position:0vw 0vw;   et la partie droite background-position:-30vw 0vw;

    Au survol d'un bouton invisible (A1,B1...) placé au dessus du bouton visible (A,B...), l'image de fond de .lpsa change et les deux parties se redressent par modification de perspective passant de (30vw) à (200vw). Plus le chiffre est bas et plus la perspective est accentuée.

    L'image de fond de .lpsa au départ n'est pas importante car elle ne fait que permettre un changement d'image.

    Vous placez vos adresses de vos images à la place des miennes, en bleu. Vous pouvez en ajouter ou en retirer en ajoutant ou retirant autant de couples bouton/bouton invisible