En losange bsp

Même page que sur Ekla afin de vérifier si la newsletter l'annonce ou non.

Ce coup-ci, je n'oublie pas de bloquer les commentaires dessus !

Clic

</div>

<style><!--

.sm{position:absolute;z-index:2; width:450px; height:450px; border:6px solid white; transition:all 1s;}

#sm1{box-sizing:border-box; background:url('http://ekladata.com/iYBDi1g2Xc0Fzf9ZJyS5ujw0Eyw.jpg'); background-position:50% 50%; background-size:1200px 675px; transform:translate(360px,110px) rotate(45deg) scale(1);}

#sm2{box-sizing:border-box; background:url('http://ekladata.com/FEzFeBUhSVdPa1jG7wSVM4rBh9c.jpg'); background-position:50% 50%; background-size:1200px 675px; transform:translate(360px,110px) rotate(45deg) scale(0.85);}

#sm3{box-sizing:border-box; background:url('http://ekladata.com/6x41jjcV61tUQP439-QtUz4REWc.jpg'); background-position:50% 50%; background-size:1200px 675px; transform:translate(360px,110px) rotate(45deg) scale(0.7);}

#sm4{box-sizing:border-box; background:url('http://ekladata.com/R8R7y9ih33rHenIa3hOEzD05fSQ.jpg'); background-position:50% 50%; background-size:1200px 675px; transform:translate(360px,110px) rotate(45deg) scale(0.55);}

#sm5{box-sizing:border-box; background:url('http://ekladata.com/ousjp11nFK31oFRvAE7RDTps0Ws.jpg'); background-position:50% 50%; background-size:1200px 675px; transform:translate(360px,110px) rotate(45deg) scale(0.4);}

#sm6{box-sizing:border-box; background:url('http://ekladata.com/lGZPJQ2E5vRRf86ydT4jKieAW44.jpg'); background-position:50% 50%; background-size:1200px 675px; transform:translate(360px,110px) rotate(45deg) scale(0.25);}

#sm0{position:absolute; z-index:1; width:120px;font-size:30px; transform:translate(150px,50px);}

#sm9{position:absolute; z-index:1; width:1200px; height:675px; transform:translate(0px,0px);}

#sm1:focus,#sm2:focus,#sm3:focus,#sm4:focus,#sm5:focus,#sm6:focus{z-index:5; width:1200px; height:675px; transform:translate(0px,0px) rotate(0deg) scale(1);}

.sm:focus ~ #sm9{z-index:10;}

--></style>