• Exemple 216

    Un amusement pour essayer d'afficher les vignettes avec une bordure floue; ce n'est pas parfait mais je ne sais pas faire mieux !

    Le flou étant de la couleur de fond, j'ai mis du blanc, pour le différencier de la couleur de fond de ma page: Survol.

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 5px auto; border: 1px solid black; background: white;">
    <p id="flou1" class="flou">&nbsp;</p>
    <p id="flou2" class="flou">&nbsp;</p>
    <p id="flou3" class="flou">&nbsp;</p>
    <p id="flou4" class="flou">&nbsp;</p>
    <p id="flou5" class="flou">&nbsp;</p>
    </div>

    <style><!--
    .flou{position:absolute; z-index:1; filter:grayscale(1); border-radius:50%; border:4px solid white; box-shadow:inset 0px 0px 20px 20px white, 0px 0px 20px white; transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, border-radius 1s linear 1s, box-shadow 1s linear 1s, filter 1s linear 2s;}
    #flou1{box-sizing:border-box; width:200px; height:200px; background:url('http://ekladata.com/QgKrrobWtiqY9KIa-gshAEHiBwc.jpg'); background-size:1000px 563px; background-position:-100px -150px; transform:translate(100px,150px);}
    #flou2{box-sizing:border-box; width:100px; height:200px; background:url('http://ekladata.com/0tNhceziDWqdj1U-T7MQe8f4fik.jpg'); background-size:1000px 563px; background-position:-350px -100px; transform:translate(350px,100px);}
    #flou3{box-sizing:border-box; width:200px; height:100px; background:url('http://ekladata.com/u8qXWHF2h6QEabbCFA1Ge1sX5BE.jpg'); background-size:1000px 563px; background-position:-600px -50px; transform:translate(600px,50px);}
    #flou4{box-sizing:border-box; width:200px; height:100px; background:url('http://ekladata.com/b3RkrjMYBBc_8NgYf6fL7JjRgHQ.jpg'); background-size:1000px 563px; background-position:-250px -400px; transform:translate(250px,400px); border-radius:0%;}
    #flou5{box-sizing:border-box; width:300px; height:300px; background:url('http://ekladata.com/fPslByx3n5F7yixPHps0XZRmiiU.jpg'); background-size:1000px 563px; background-position:-600px -200px; transform:translate(600px,200px);}
    #flou1:hover,#flou2:hover,#flou3:hover,#flou4:hover,#flou5:hover{z-index:5; width:1000px; height:563px; border-radius:0%; transform:translate(0px,0px); background-position:0px 0px; filter:grayscale(0); box-shadow:none;}
    --></style>