Quem escreve?

Hello! Sejam bem vindos ao meu blog.

Meu nome é Andréa, tenho 17 anos, nasci no dia 05/06/95, sou filha do Rei dos Reis, moro em Salvador-BA, sou amante da Moda e dos livros. Aqui é onde fico a vontade para falar sobre tudo o que eu gosto. Sintam-se à vontade para explorar o meu mundo.

21 janeiro 2013

3

Tutorial: Opacidade nas imagens (ao contrário)

Primeiro tutorial do Blog! :3 
 Neste tutorial irei ensinar como colocar o efeito de opacidade nas imagens, só que ao contrário. É o mesmo efeito de claro-escuro, porém, a foto vai estar normal e quando passar o mouse ela ficará meio embaçada.

 Passe o mouse e veja!
                                 

A dois jeitos de fazer este efeito. A diferença entre os dois é que: No primeiro você poderá escolher as imagens em que você quer opacidade. Já no segundo não dá pra escolher, ou seja, todas as imagens do blog terão o efeito.



Este é o jeito em que você pode escolher as imagens: 

01|Vá até "design" >>"editar html" e procure por ]]> Logo acima cole:


/** opacidade por facasecanetas **/
.opacidade {
margin: 1px;
border: none;
filter: alpha(opacity=100);
moz-opacity:1.0;
opacity:1.0;
-webkit-transition-duration: .25s;
}

.opacidade:hover {
margin: 1px;
border: none;
filter: alpha(opacity=80);
moz-opacity:.80;
opacity:.80 ;
}

02|Copie o código abaixo e cole na sua postagem:

<img src="LINK_DA_IMAGEM"  class="opacidade" height="ALTURA" width="LARGURA" />

Agora vamos aprender do segundo modo: 

01|Vá até "design" >>"editar html" e procure por ]]> Logo acima cole:

/** opacidade por facasecanetas **/
img { margin: 1px; border: none; filter: alpha(opacity=100); moz-opacity:1.0; opacity:1.0; -webkit-transition-duration: .25s; } img:hover { margin: 1px; border: none; filter: alpha(opacity=80); moz-opacity:.80; opacity:.80 ; }
Bom, é só isso. Espero que tenham gostado do post e que seja útil. 
 Codificado por mim, crédito ()

3 comentários:

  1. Olá você ganhou o Game do Blog : Nevando em Nova York... Seu blog vai começar a ser divulgado amanhã Parabéns ... Obrigada..

    O blog: http://neveemnovayork.blogspot.com.br/

    Parabéns... ♥♥

    ResponderExcluir