• Pluie

    Les Amérindiens et d'autres, faisaient venir la pluie par des danses; devant la sécheresse actuelle, importante dans la Haute Provence, même si elle est humifiée par l'eau des alpes du sud, je vais essayer un article pour la faire tomber chez nous ... qui ne risque rien n'a rien !

    8 images au ratio 16/9, en 1000x563px.

    SURVOL

     

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;">
    <p id="pl0">SURVOL</p>
    <p id="pl1" class="pl">&nbsp;</p>
    <p id="pl2" class="pl">&nbsp;</p>
    <p id="pl3" class="pl">&nbsp;</p>
    <p id="pl4" class="pl">&nbsp;</p>
    <p id="pl5" class="pl">&nbsp;</p>
    <p id="pl6" class="pl">&nbsp;</p>
    <p id="pl7" class="pl">&nbsp;</p>
    <p id="pl8" class="pl">&nbsp;</p>
    </div>
    <style><!--
    #pl0{position:absolute; z-index: width:150px; font-size:30px; transform:translate(100px,20px);}
    .pl{position:absolute; z-index:1;border-radius: 0% 50% 50% 50%;border: 1px solid black; box-shadow: inset 4px 4px 8px black, inset -4px -4px 8px white; background-size:1000px 563px;transition:all 1s;}
    #pl1{width: 120px; height: 120px; background: url('http://ekladata.com/EdWBIw2f-KCfZvWvFzeEdq24ciA.jpg'); background-position:-100px -100px; transform: translate(100px,100px) rotate(45deg);}
    #pl2{width: 150px; height: 150px; background: url('http://ekladata.com/Qu8j5RQ6AhKhYtspbQb3n6dUy_o.jpg'); background-position:-200px -200px; transform: translate(300px,200px) rotate(45deg);}
    #pl3{width: 100px; height: 100px; background: url('http://ekladata.com/1sV7Qo7NEaztJY-pWIRD_ejbhkY.jpg'); background-position:-500px -120px; transform: translate(500px,120px) rotate(45deg);}
    #pl4{width: 120px; height: 120px; background: url('http://ekladata.com/GGdiNxEKaguz28GulroLsy0PoWU.jpg'); background-position:-550px -350px; transform: translate(550px,350px) rotate(45deg);}
    #pl5{width: 80px; height: 80px; background: url('http://ekladata.com/BcUWLq3YGnok46zuMIZ5iJnV_8g.jpg'); background-position:-150px -350px; transform: translate(150px,350px) rotate(45deg);}
    #pl6{width: 100px; height: 100px; background: url('http://ekladata.com/YxwgxPzDTJWFPDxjXAEv7rZeraI.jpg'); background-position:-650px -50px; transform: translate(650px,50px) rotate(45deg);}
    #pl7{width: 150px; height: 150px; background: url('http://ekladata.com/G8-YqGZxGuK9RVh6M8kPylIkJLc.jpg'); background-position:-750px -80px; transform: translate(750px,80px) rotate(45deg);}
    #pl8{width: 100px; height: 100px; background: url('http://ekladata.com/va8fEw8CDneKk_SGaNtfvmDwcOc.jpg'); background-position:-800px -350px; transform: translate(800px,350px) rotate(45deg);}
    #pl1:hover,#pl2:hover,#pl3:hover,#pl4:hover,#pl5:hover,#pl6:hover,#pl7:hover,#pl8:hover{z-index:5; width:1000px; height:563px; border-radius:0%; background-position:0px 0px;transform: translate(0px,0px) rotate(0deg); }
    --></style>