• Pour Yann

    Voici une version plus simple de mon montage du 11 juillet 2016.

    L'image fait 800x600px et est divisée en 4 parties égales de 400x300px.

    Le montage est contenu dans un espace de 800x600px, centré dans votre page.

    Une seule adresse d'image à remplacer par la votre pour personnaliser ce montage.

     

    Survolez cette image.

     

     

     

     

    y0 est la taille et le positionnement du montage.

    y1 est le bouton invisible fixe, placé sur l'image centrale, qui anime les 4 parties au survol.

    y2 est le texte survolez cette image.

    .a est la classe qui place l'image en fond de chaque partie.

    y3/y4/y5/y6  sont les 4 parties de l'image, de 250x190px; elles sont placées les unes sur les autres (z-index);  chacune reçoit, en fond, un quart de l'image principale, défini par background-position; elles s'agrandissent à 400x300px et reprennent leur position respective, au survol du bouton y1.

    La dimension, le positionnement et éventuellement la forme) des 4 parties est à votre choix.

    <div id="y0">
    <p id="y1">&nbsp;</p>
    <p id="y2">Survolez cette image.</p>
    <p id="y3" class="a">&nbsp;</p>
    <p id="y4" class="a">&nbsp;</p>
    <p id="y5" class="a">&nbsp;</p>
    <p id="y6" class="a">&nbsp;</p>
    </div>
    <style><!--
    #y0{width:800px; height:600px; margin:5px auto;}
    .a{background:url('http://ekladata.com/-HqR5EoTHP3nQThIr8WY1HmCnVc.jpg');}
    #y1{position:absolute; z-index:10; width:250px; height:190px;transform:translate(275px,240px);}
    #y2{position:absolute; z-index:1; width: 400px; height: 60px; transform:translate(210px,50px);text-align: center; font-size: 25pt; color: white; text-shadow: 2px 2px black;}
    #y3{position:absolute; z-index:5; width:250px;height:190px; background-position:0% 0%; transform:translate(275px,240px); transition:all 1s linear;}
    #y4{position:absolute; z-index:4; width:250px;height:190px; background-position:100% 0%; transform:translate(275px,240px); transition:all 1s linear;}
    #y5{position:absolute; z-index:3; width:250px;height:190px; background-position:0% 100%; transform:translate(275px,240px); transition:all 1s linear;}
    #y6{position:absolute; z-index:2; width:250px;height:190px; background-position:100% 100%; transform:translate(275px,240px); transition:all 1s linear;}
    #y1:hover ~ #y3{transform:translate(0px,0px); width:400px; height:300px;}
    #y1:hover ~ #y4{transform:translate(400px,0px); width:400px; height:300px;}
    #y1:hover ~ #y5{transform:translate(0px,300px); width:400px; height:300px;}
    #y1:hover ~ #y6{transform:translate(400px,300px); width:400px; height:300px;}
    --></style>