Bom dia, voltei aqui com mais uma dica tem inumeras opções de efeitos,então postarei por partes... Como na imagem acima mostra é uma box com foto e efeito hover mas pode visualizár online``
ENTRE AQUI:
Para simpleficár eu deixarei código para html/javascript, então p/ você usar é só aplicar gadget,ou usár nas postagens,pois fica seu critério...
Código abaixo´´
<style>
#excaixabt{
width:250px;
height:120px;
margin:auto;
border:3px solid #fff;
border-radius:10px ;
-moz-border-radius:10px;
-webkit-border-radius:10px ;
background:#fff url(https://s-media-cache-ak0.pinimg.com/236x/ae/a6/9f/aea69f382057c3f04fafc8bab96f9279.jpg);
box-shadow:0px 0px 20px 0px #000;
-moz-box-shadow:0px 0px 20px 0px #000;
-webkit-box-shadow:0px 0px 20px 0px #000;
transition-duration:2s;padding:10px;
-webkit-transition-duration:2s;
}
#excaixabt:hover{
transform:matrix(0.86,0.5,-0.5,0.86, 0, 0);
-ms-transform:matrix(0.86,0.5,-0.5,0.86, 0, 0);
-webkit-transform:matrix(0.86,0.5,-0.5,0.86, 0, 0);
}
</style>
<div id="excaixabt">
</div>
Nota,aqui abaixo explico cada detalhe deste gadget .
- width:250px largura caixa
- height:120px; altura caixa
- margin:auto; caixa centrada
- border:3px solid #fff; borda expessura e côr
- border-radius:10px moz webkit: angulo borda caixa
- background:#fff url(); côr e imagem fundo caixa
- box-shadow:px #000 moz webkit; côr espessura de fora caixa
- transition transition hover; efeito na imagem caixa
Mostra SmilesOculta Smiles