• Des coins 2

    Même punition

    Survol; animation différente plus simple à écrire. 

     

     

     

     

    <div style="position: relative; width: 1000px; height: 562px; margin: 5px auto; border: 2px solid black; background: url('http://ekladata.com/jcRJDGpC7sv50DmaV4KSuGiRIeM.jpg'); background-size: cover; text-align: left; overflow: hidden;">
    <p id="bs1" class="bs">&nbsp;</p>
    <p id="bs2" class="bs">&nbsp;</p>
    <p id="bs3" class="bs">&nbsp;</p>
    <p id="bs4" class="bs">&nbsp;</p>
    </div>
    <style><!--
    .bs{position:absolute; z-index:1; width:1000px; height:562px; border:6px ridge white; transition:all 1s linear;}
    #bs1{box-sizing:border-box; background:url('http://ekladata.com/pbW5HXGyWcCev4eK2ghL3xZEODY.jpg'); background-size:cover; transform:translate(-450px,-470px) rotate(-45deg)}
    #bs2{box-sizing:border-box; background:url('http://ekladata.com/vk-rXnUJ4yFv59PhcMImh6HBF5c.jpg'); background-size:cover; transform:translate(400px,-520px) rotate(45deg)}
    #bs3{box-sizing:border-box; background:url('http://ekladata.com/DoNdcaH8k09tWZfLc9iEYFk4OXY.jpg'); background-size:cover; transform:translate(400px,480px) rotate(-45deg)}
    #bs4{box-sizing:border-box; background:url('http://ekladata.com/pcKV_72JHC1OX_APkKj76594z8E.jpg'); background-size:cover; transform:translate(-450px,430px) rotate(45deg)}
    #bs1:hover,#bs2:hover,#bs3:hover,#bs4:hover{z-index:5; transform:translate(0px,0px) rotate(0deg);}
    --></style>