• Flou (blur)

    3 exemples d'image en flou et nette au survol.

    Le premier en image simple, sans bordure.

    Le second en image simple avec bordure floue.

    Le troisième avec bordure nette et image floue puis nette au survol et inclinaison.

    <p style="height: 23vw;"><img id="mag1" src="http://ekladata.com/WS6_I-pCr388Oe_bCjWjLbsSSR8@768x432.jpg" alt="" /></p>
    <style><!--
    #mag1{width:20vw; height:11.25vw; filter:blur(1vh); transition:all 1s linear;}
    #mag1:hover{width:40vw; height:22.5vw; filter:blur(0);}
    --></style>

    *****

    <p style="height: 23vw;"><img id="mag2" src="http://ekladata.com/WS6_I-pCr388Oe_bCjWjLbsSSR8@768x432.jpg" alt="" /></p>
    <style><!--
    #mag2{width:20vw; height:11.25vw; border:0.4vh solid white; filter:blur(1vh); transition:all 1s linear;}
    #mag2:hover{width:40vw; height:22.5vw; filter:blur(0);}
    --></style>

    *****

    <div style="height: 23vw; margin: 3vw auto;">
    <p id="enc"><img id="mag3" src="http://ekladata.com/WS6_I-pCr388Oe_bCjWjLbsSSR8@768x432.jpg" alt="" /></p>
    </div>
    <style><!--
    #enc{margin:1vh auto;width:20vw; height:11.25vw; transform:translate(0vw,0vw) rotate(15deg); border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black; overflow:hidden; transition:all 1s linear;}
    #mag3{width:20vw; height:11.25vw; filter:blur(1vh); transition:all 1s linear;}
    #enc:hover{width:40vw; height:22.5vw; transform:translate(0vw,0vw) rotate(0deg);}
    #mag3:hover{width:40vw; height:22.5vw; filter:blur(0);}
    --></style>

    *****