O tutorial de hoje traz um efeito css muito legal, bom eu estava procurando por artigos css3 e achei este, é um efeito transição em imagens, ou seja a imagem fica com um certo grau de opacidade, e ao passar o mouse, ela volta ao normal em uma velocidade suave.
Vamos ao tutorial:
1°- Abra o painel do blogger > Design > Editar html;
2°- Em seguida segure as teclas CTRL + F e procure por: ]]></b:skin>
3°-E acima cole o seguinte código:
.post-body img {padding: 6px !important;background: transparent !important;-webkit-transition: all 0.8s linear !important;border: 1px solid #C8C6C6 !important;-webkit-border-radius: 8px !important;-moz-border-radius: 8px !important;border-radius: 8px !important;transition: all 0.3s ease !important;-webkit-transition: all 0.8s ease !important;-o-transition: all 0.8s ease !important;-moz-transition: all 0.8s ease !important;opacity:0.5 !important;}
.post-body img:hover {opacity:1 !important;-webkit-box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;-moz-box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;}
4°- Salve e pronto!
0 comentários:
Postar um comentário