• Zoom1 Henri

    Un fidèle et ancien visiteur a préparé une montage avec le survol d'une image qui agrandissait la partie survolée, dans un cadre indépendant et de plus grande taille.

    Le principe est de placer, au dessus d'un image, des zones invisibles dont chacune agrandira une partie de l'image et l'affichera dans un cadre, visible ou non.

    Pour déjà présenter le principe, j'ai choisi des "strips" du chat, de Philippe Geluck mais d'autres exemples devraient suivre !

    Survolez chaque case des bandes du chat, dans l'ordre,  de gauche à droite, de préférence !

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 40vw; height: 25vw; margin: 2vh auto;">
    <p id="sel1" class="sel">&nbsp;</p>
    <p id="sel2" class="sel">&nbsp;</p>
    <p id="sel3" class="sel">&nbsp;</p>
    <p id="mod1" class="md1">&nbsp;</p>
    <p id="sel1a" class="sel">&nbsp;</p>
    <p id="sel2a" class="sel">&nbsp;</p>
    <p id="sel3a" class="sel">&nbsp;</p>
    <p id="mod1a" class="md1a">&nbsp;</p>
    <p id="sel1b" class="sel">&nbsp;</p>
    <p id="sel2b" class="sel">&nbsp;</p>
    <p id="sel3b" class="sel">&nbsp;</p>
    <p id="mod1b" class="md1b">&nbsp;</p>
    <p id="sel1c" class="sel">&nbsp;</p>
    <p id="sel2c" class="sel">&nbsp;</p>
    <p id="sel3c" class="sel">&nbsp;</p>
    <p id="mod1c" class="md1c">&nbsp;</p>
    <p id="ecran">&nbsp;</p>
    </div>
    <style><!--
    .sel{position:absolute; z-index:2; box-sizing:border-box; width:3vw; height:3vw;}
    #sel1{transform:translate(25vw,0vw);}
    #sel2{transform:translate(28vw,0vw);}
    #sel3{transform:translate(31vw,0vw);}
    .md1{background:url('http://ekladata.com/qk73-Bl__nAs4nEy9PIa4oLreoo.jpg'); background-size:9vw 3vw;}
    #mod1{position:absolute; z-index:1; width:9vw; height:3vw; transform:translate(25vw,0vw);}
    #ecran{position:absolute; z-index:1; width:21vw; height:20vw; transform:translate(0vw,0vw);}
    #sel1:hover ~ #ecran{background:url('http://ekladata.com/qk73-Bl__nAs4nEy9PIa4oLreoo.jpg'); background-position:0vw 0vw; background-size:cover;}
    #sel2:hover ~ #ecran{background:url('http://ekladata.com/qk73-Bl__nAs4nEy9PIa4oLreoo.jpg'); background-position:-22.5vw 0vw; background-size:cover;}
    #sel3:hover ~ #ecran{background:url('http://ekladata.com/qk73-Bl__nAs4nEy9PIa4oLreoo.jpg'); background-position:-45vw 0vw; background-size:cover;}
    #sel1a{transform:translate(25vw,4vw);}
    #sel2a{transform:translate(28vw,4vw);}
    #sel3a{transform:translate(31vw,4vw);}
    .md1a{background:url('http://ekladata.com/AXr1JTzGPHsktKyW35BCHh7E9QY.jpg'); background-size:9vw 3vw;}
    #mod1a{position:absolute; z-index:1; width:9vw; height:3vw; transform:translate(25vw,4vw);}
    #sel1a:hover ~ #ecran{background:url('http://ekladata.com/AXr1JTzGPHsktKyW35BCHh7E9QY.jpg'); background-position:0vw 0vw; background-size:cover;}
    #sel2a:hover ~ #ecran{background:url('http://ekladata.com/AXr1JTzGPHsktKyW35BCHh7E9QY.jpg'); background-position:-22.5vw 0vw; background-size:cover;}
    #sel3a:hover ~ #ecran{background:url('http://ekladata.com/AXr1JTzGPHsktKyW35BCHh7E9QY.jpg'); background-position:-45vw 0vw; background-size:cover;}
    #sel1b{transform:translate(25vw,8vw);}
    #sel2b{transform:translate(28vw,8vw);}
    #sel3b{transform:translate(31vw,8vw);}
    .md1b{background:url('http://ekladata.com/FvyouM6n8_wk7rRg--q-IuT5f4g.jpg'); background-size:9vw 3vw;}
    #mod1b{position:absolute; z-index:1; width:9vw; height:3vw; transform:translate(25vw,8vw);}
    #sel1b:hover ~ #ecran{background:url('http://ekladata.com/FvyouM6n8_wk7rRg--q-IuT5f4g.jpg'); background-position:0vw 0vw; background-size:cover;}
    #sel2b:hover ~ #ecran{background:url('http://ekladata.com/FvyouM6n8_wk7rRg--q-IuT5f4g.jpg'); background-position:-22.5vw 0vw; background-size:cover;}
    #sel3b:hover ~ #ecran{background:url('http://ekladata.com/FvyouM6n8_wk7rRg--q-IuT5f4g.jpg'); background-position:-45vw 0vw; background-size:cover;}
    #sel1c{transform:translate(25vw,12vw);}
    #sel2c{transform:translate(28vw,12vw);}
    #sel3c{transform:translate(31vw,12vw);}
    .md1c{background:url('http://ekladata.com/1eEF5w2SMDqt_v2sAh2_8snHALs.jpg'); background-size:9vw 3vw;}
    #mod1c{position:absolute; z-index:1; width:9vw; height:3vw; transform:translate(25vw,12vw);}
    #sel1c:hover ~ #ecran{background:url('http://ekladata.com/1eEF5w2SMDqt_v2sAh2_8snHALs.jpg'); background-position:0vw 0vw; background-size:cover;}
    #sel2c:hover ~ #ecran{background:url('http://ekladata.com/1eEF5w2SMDqt_v2sAh2_8snHALs.jpg'); background-position:-22.5vw 0vw; background-size:cover;}
    #sel3c:hover ~ #ecran{background:url('http://ekladata.com/1eEF5w2SMDqt_v2sAh2_8snHALs.jpg'); background-position:-45vw 0vw; background-size:cover;}
    --></style>

    Dans cet exemple; j'ai utilisé 4 images et chaque paragraphe du code CSS ne diffère que par l'adresse de l'image et les positionnements.

    La page suivante ne contiendra qu'une image, rassurez-vous !