• Flou h.

    Bordure floue: images à survoler.

    Premier exemple avec un fond de page uni; l'image est de largeur 60vw au départ et s'agrandit en 80vw au survol; la partie visible au départ est centrée par background-position:-10vw 0vw;

     


    <div style="width: 80vw; height: 45vw; margin: 2vh auto;">
    <p id="omb1">&nbsp;</p>
    </div>

    <style><!--
    #omb1{position:absolute; z-index:2; width:60vw; height:45vw; background:url('http://ekladata.com/9RqK3AX3_QOuwRdKHr8ppoFCuI0.jpg'); background-size:80vw 45vw; background-position:-10vw 0vw; transform:translate(10vw,0vw); box-shadow: inset 0vw 0vw 2vw 15vw #d9d9d9; transition:all 2s linear;}
    #omb1:hover{width:80vw; transform:translate(0vw,0vw); background-position:0vw 0vw; box-shadow:inset 0vw 0vw 0vw 0vw #d9d9d9;}
    --></style>


    Version en 60vw par 69vh, pour Nicole. Je n'ai pas modifié le centrage du sujet pour être "standard".

     


    Version en 60vw par 33.75vw, pour Nicole. Je n'avais pas réalisé que la couleur de son fond de page n'était pas la mienne; voici donc une version avec sa couleur de fond:#494615.

    Comme le sujet principal est décentré, j'ai ajouté une translation pour que l'agrandissement se fasse à partir du sujet mais c'est spécifique à cette photo.

    De plus, au lieu d'utiliser 2 unités différentes (vw et vh), ce qui est moins simple, je n'ai utilisé que l'unité vw.

     


    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto;">
    <p id="nic2">&nbsp;</p>
    </div>
    <style><!--
    #nic2{position:absolute; z-index:2; width:20vw; height:20vw; border-radius:50%; transform:translate(20vw,0vw); background:url('http://ekladata.com/4ZJILfSTc2u3ihbDx30oAUxbKDQ.jpg'); background-size: 60vw 69vh; box-shadow: inset 0vw 0vw 2vw 3vw #494615; transition:all 2s linear; background-position:-20vw 0vw; }
    #nic2:hover{width:60vw; height:33.75vw; transform:translate(0vw,0vw); box-shadow:inset 0vw 0vw 0vw 0vw #494615; background-position:0vw 0vw; border-radius:0%;}
    --></style>


    <div style="width: 60vw; height: 69vh; margin: 2vh auto;">
    <p id="nic1">&nbsp;</p>
    </div>
    <style><!--
    #nic1{position:absolute; z-index:2; width:40vw; height:46vh; background:url('http://ekladata.com/6IUuwgTOU4jxfu88s89Kd_SAlX0.jpg'); background-size: 60vw 69vh; box-shadow: inset 0vw 0vw 2vw 5vw #d9d9d9; transition:all 2s linear;}
    #nic1:hover{width:60vw; height:69vh; transform:translate(0vw,0vw); box-shadow:inset 0vw 0vw 0vw 0vw #d9d9d9;}
    --></style>

     



    Si le fond de votre page est image, il vous faudra ajouter un cadre à fond uni.

    Le sujet n'étant pas centré, vous pouvez l'afficher au centre au départ pour qu'il reprenne sa place au survol.

     


    <div style="width: 80vw; height: 45vw; background: white; border: 0.3vh solid grey; margin: 2vh auto;">
    <p id="omb2">&nbsp;</p>
    </div>

    <style><!--
    #omb2{position:absolute; z-index:2; width:60vw; height:45vw; background:url('http://ekladata.com/N2cLqc18hz24iYIXXp_5wxEcRrg.jpg'); background-size:80vw 45vw; background-position:-10vw -12vw; transform:translate(10vw,0vw); box-shadow: inset 0vw 0vw 2vw 15vw white; transition:all 2s linear;}
    #omb2:hover{width:80vw; transform:translate(0vw,0vw); background-position:0vw 0vw; box-shadow:inset 0vw 0vw 0vw 0vw white;}
    --></style>

     


     

     

     

     

     

     

     


    <div style="width: 80vw; height: 45vw; margin: 2vh auto;">
    <p id="pay0">&nbsp;</p>
    <p id="pay1" class="pay">&nbsp;</p>
    <p id="pay2" class="pay">&nbsp;</p>
    <p id="pay3" class="pay">&nbsp;</p>
    <p id="pay4" class="pay">&nbsp;</p>
    <p id="pay5" class="pay">&nbsp;</p>
    <p id="pay6" class="pay">&nbsp;</p>
    </div>
    <style><!--
    #pay0{position:absolute; z-index:10; width:80vw; height:45vw;}
    #pay1{position:absolute; z-index:1; box-sizing:border:box; border:0.4vh ridge white; box-shadow:0.3vh 0.3vh 0.6vh black; width:10vw; height:30vw; background:url('http://ekladata.com/Mhjep9zI4KKNxmkHAm0M7_qxeGY.jpg'); background-size:80vw 45vw; background-position:-2vw -7.5vw; transform:translate(2vw,7.5vw); transition:all 1s linear;}
    #pay2{position:absolute; z-index:1; box-sizing:border:box; border:0.4vh ridge white; box-shadow:0.3vh 0.3vh 0.6vh black; width:10vw; height:20vw; background:url('http://ekladata.com/Mhjep9zI4KKNxmkHAm0M7_qxeGY.jpg'); background-size:80vw 45vw; background-position:-16vw -12.5vw; transform:translate(16vw,12.5vw); transition:all 1s linear;}
    #pay3{position:absolute; z-index:1; box-sizing:border:box; border:0.4vh ridge white; box-shadow:0.3vh 0.3vh 0.6vh black; width:10vw; height:40vw; background:url('http://ekladata.com/Mhjep9zI4KKNxmkHAm0M7_qxeGY.jpg'); background-size:80vw 45vw; background-position:-29vw -5vw; transform:translate(29vw,5vw); transition:all 1s linear;}
    #pay4{position:absolute; z-index:1; box-sizing:border:box; border:0.4vh ridge white; box-shadow:0.3vh 0.3vh 0.6vh black; width:10vw; height:10vw; background:url('http://ekladata.com/Mhjep9zI4KKNxmkHAm0M7_qxeGY.jpg'); background-size:80vw 45vw; background-position:-42vw -17.5vw; transform:translate(42vw,17.5vw); transition:all 1s linear;}
    #pay5{position:absolute; z-index:1; box-sizing:border:box; border:0.4vh ridge white; box-shadow:0.3vh 0.3vh 0.6vh black; width:10vw; height:35vw; background:url('http://ekladata.com/Mhjep9zI4KKNxmkHAm0M7_qxeGY.jpg'); background-size:80vw 45vw; background-position:-55vw -5vw; transform:translate(55vw,5vw); transition:all 1s linear;}
    #pay6{position:absolute; z-index:1; box-sizing:border:box; border:0.4vh ridge white; box-shadow:0.3vh 0.3vh 0.6vh black; width:10vw; height:25vw; background:url('http://ekladata.com/Mhjep9zI4KKNxmkHAm0M7_qxeGY.jpg'); background-size:80vw 45vw; background-position:-68vw -10vw; transform:translate(68vw,10vw); transition:all 1s linear;}
    #pay0:hover ~ #pay1{width:13vw; height:45vw; transform:translate(0vw,0vw); background-position:0vw 0vw; border:none; box-shadow:0 0 0;}
    #pay0:hover ~ #pay2{width:13vw; height:45vw; transform:translate(13vw,0vw); background-position:-13vw 0vw; border:none; box-shadow:0 0 0;}
    #pay0:hover ~ #pay3{width:13vw; height:45vw; transform:translate(26vw,0vw); background-position:-26vw 0vw; border:none; box-shadow:0 0 0;}
    #pay0:hover ~ #pay4{width:13vw; height:45vw; transform:translate(39vw,0vw); background-position:-39vw 0vw; border:none; box-shadow:0 0 0;}
    #pay0:hover ~ #pay5{width:13vw; height:45vw; transform:translate(52vw,0vw); background-position:-52vw 0vw; border:none; box-shadow:0 0 0;}
    #pay0:hover ~ #pay6{width:15vw; height:45vw; transform:translate(65vw,0vw); background-position:-65vw 0vw; border:none; box-shadow:0 0 0;}
    --></style>