Como colocar o efeito opaco e arredondar a imagem

Bom, aqui vou ensinar como colocar o efeito opaco na imagem e arredondar quando passamos o mouse, é muito fácil, vá em Editar HTML > Ctrl + F > ]]></b:skin> > Acima deste código, coloque:


.post img{ filter:alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;-border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;-webkit-border-radius: 40px 40px 40px 40px;-transition-duration: 1.90s;-webkit-transition-duration: 1.90s;-moz-transition-duration: 1.90s; } .post a:hover img{ filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;-border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px 0px 0px;-webkit-border-radius: 0px 0px 0px 0px;-transition-duration: 1.90s;-webkit-transition-duration: 1.90s;-moz-transition-duration: 1.90s; } 

Pronto, agora, poste uma imagem, e você verá que a imagem vai ter um efeito opaco e as pontas arredondadas,  só que após você colocar o mouse encima a ponta fica normal e o efeito também, vejam um modelo:

Antes de passar o mouse:


Depois de passar o mouse:


Gostaram? Coloque no seu blog!



3 comentários: