6 de set de 2012

Efeito Hover na borda das Imagens


Olá pessoal! Hoje vou ensinar a colocar efeito Hover (o efeito que muda quando passa o mouse) nas imagens do blog que nem no Template Candy Shop.

O resultado é esse:

Imagem normal                                                Quando passa o mouse
:




Vamos ao tutorial:

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

/* Posts
----------------------------------------------- */
2- ABAIXO disso, cole:


.post img:hover{
  padding:10px; /* -- espaço da borda --*/
  background: #997D94; /*-- cor de fundo --*/
  -moz-border-radius: 10px; /* -- borda arredondada --*/
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -khtml-border-radius: 10px;
  border-top: 1px solid #f2c5f0; /* -- borda de cima -- */
  border-left: 1px solid #f2c5f0; /* -- borda da esquerda -- */
  border-right: 1px solid #f2c5f0; /* -- borda da direita -- */
  border-bottom: 1px solid #be98cc; /* -- borda de baixa */
  }

 Se quiser borda antes de passar o mouse:


.post img {
  padding:10px;
  background: #997D94;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -khtml-border-radius: 10px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #d6d6d6;
  }
Se quiser, mude também as propriedades da borda, como dashed, dotted, etc.

Espero que tenham gostado!! 

2 comentários:

  1. Gostei Muito desse tutorial , estava procurando faz tempo , bom Adorei seu blog e queria lhe fazer um pedido de afiliação flor , se você quiser , da uma passadinha aqui okay ? Kiss ' ♥

    ~> http://meubloguinhofofo.blogspot.com.br/

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!