• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

16 de novembro de 2012

Colocando bordas hover nas imagens que você desejar


Olá gente, 
Quem aqui já viu essas bordas das imagens assim como a ilustração desse post? vamos aprender como fazer isso?


Primeiro vá em  Design  Editar HTML Ctrl + F (caixa de pesquisa) e procure por:

]]></b:skin>

Acima desse código, cole esse aqui: 


.efeitoimagem {

transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
border: 3px solid #FF69B4; /*espessura, tipo e cor de borda*/
}
.efeitoimagem:hover {
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
opacity: .6; /*opacidade*/
border: 3px solid #40E0D0; /*espessura, tipo e cor da borda quando hover*/
}


Agora para usar esse efeito nas imagens que você quiser, quando você estiver fazendo sua postagem, tem duas opções certo? ESCREVER|HTML, você clica em HTML, aí cole esse link:

<img src="URL da imagem" class="efeitoimagem"/></a> 

Aonde está escrito 'URL DA IMAGEM' você coloca a url da sua imagem, você pode colocar esse efeito nos afiliados ou na foto do 'welcome' do blog se preferir, eu acho esse tutorial super fofo pois dá um toque à mais nas imagens, você pode usar essa tabela aqui para editar as cores no seu HTML ^_^

Beijos

6 comentários:

  1. Lindo esse efeito,acho que fica muito lindo nas imagens.Beijos e mais beijos

    ResponderExcluir
  2. Muito fofo esse efeito, está salvo nos meus favoritos!

    Beijos :*
    http://pequena-julieta.blogspot.com.br/
    Mande sua pergunta sobre o Crazy Paródias!

    ResponderExcluir
  3. Adooro esse tutorial, até usei no meu blog >.<

    potedemagianaweb.blogspot.com.br/

    ResponderExcluir