• Exemple 4

    Une décoration que beaucoup savent faire mieux que moi, avec des logiciels de traitement d'images mais qui sont possibles par code html/CSS.

    Faire coulisser les images par le curseur latéral droit.

    La même adresse d'image est en fond et en noir et blanc et en ovale coloré, au dessus.

     

     

     

     

     

     

     

     


    <div style="width:60.5vw; height:33.75vw; margin:0.1vh auto; border:0.4vh ridge white; overflow:auto;">
    <div id="fr1">
    <p id="gh1">&nbsp;</p>
    <p id="gh2">&nbsp;</p>
    </div>
    <div id="fr2">
    <p id="gh3">&nbsp;</p>
    <p id="gh4">&nbsp;</p>
    </div>
    <div id="fr3">
    <p id="gh5">&nbsp;</p>
    <p id="gh6">&nbsp;</p>
    </div>
    <div id="fr4">
    <p id="gh7">&nbsp;</p>
    <p id="gh8">&nbsp;</p>
    </div>
    </div>

    <style><!--
    #fr1,#fr2,#fr3,#fr4{position:relative; width:60vw; height:33.75vw;}
    #gh1{position:absolute; z-index:1;width:60vw; height:33.75vw;background:url('http://ekladata.com/pf7lafMNlI0kg5OIBGB47xxzx4o.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); opacity:0.6;}
    #gh2{position:absolute; z-index:2;width:60vw; height:33.75vw; border-radius:50%; background:url('http://ekladata.com/pf7lafMNlI0kg5OIBGB47xxzx4o.jpg'); background-size:cover;box-shadow:inset 0.3vw 0.3vw 0.6vw white, inset -0.3vw -0.3vw 0.6vw black;}
    #gh3{position:absolute; z-index:1;width:60vw; height:33.75vw;background:url('http://ekladata.com/2VlJim8VdV4f5_cybsr-YJ5rXRw.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); opacity:0.6;}
    #gh4{position:absolute; z-index:2;width:60vw; height:33.75vw; border-radius:50%; background:url('http://ekladata.com/2VlJim8VdV4f5_cybsr-YJ5rXRw.jpg'); background-size:cover;box-shadow:inset 0.3vw 0.3vw 0.6vw white, inset -0.3vw -0.3vw 0.6vw black;}
    #gh5{position:absolute; z-index:1;width:60vw; height:33.75vw;background:url('http://ekladata.com/m9cPVaCYoxG8HCyf4f-U3cBfzwQ.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); opacity:0.6;}
    #gh6{position:absolute; z-index:2;width:60vw; height:33.75vw; border-radius:50%; background:url('http://ekladata.com/m9cPVaCYoxG8HCyf4f-U3cBfzwQ.jpg'); background-size:cover;box-shadow:inset 0.3vw 0.3vw 0.6vw white, inset -0.3vw -0.3vw 0.6vw black;}
    #gh7{position:absolute; z-index:1;width:60vw; height:33.75vw;background:url('http://ekladata.com/ZsiFIPsp3VykVXocdPBdCVDGDdc.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); opacity:0.6;}
    #gh8{position:absolute; z-index:2;width:60vw; height:33.75vw; border-radius:50%; background:url('http://ekladata.com/ZsiFIPsp3VykVXocdPBdCVDGDdc.jpg'); background-size:cover;box-shadow:inset 0.3vw 0.3vw 0.6vw white, inset -0.3vw -0.3vw 0.6vw black;}
    --></style>