Transparência na imagem

Oláa unicórnios, venho trazendo uma coisa muito legal hoje, que é transparência na imagem. É bem simples. Existe 4 formas diferentes de deixar sua foto transparente.

se não sabe onde localizar, clica aqui. e vá para edit HTML e só alegria *-*.

1ª forma, faça todas as imagens transparente:

Esta pequena linha vai fazer toda a imagem em seu blog ou website transparente. Você pode editar a opacidade, alterando o '0 0,6 ".
'0 .0 'Vai fazer a imagem totalmente transparente e '1 .0' vai mostrar plenamente a imagem.

Localize o isso <style type="text/css"></style> e cole o código em vermelho abaixo entre o <style type="text/css">COLE AQUI</style>.


img{opacity: 0.6;}

2ª forma, transparente e quando passa o mouse, não fica transparente.

se você quiser que sua imagem fica transparente e quando passa o mouse ela fique normal, você vai usar esse código. 

Você pode alterar a opacidade editando '0 0,6 ".
'0 .0 'Vai fazer a imagem totalmente transparente e '1 .0' vai mostrar plenamente a imagem.

você vai procurar no CTRL + F: <style type="text/css"> </style> e cole o codigo abaixo ente <style type="text/css">COLE AQUI </ style>


img{opacity: 0.6;}
img:hover{opacity: 1.0;}

3ª Forma, Transparente para não transparente no foco do mouse com efeito de fade.

Localize usando o CTRL + F: <style type="text/css"> </ style> e cole entre ele <style type="text/css">COLE AQUI </ style>

img{opacity: 0.6;

      -webkit-transition: all 0.3s linear 0s;

         -moz-transition: all 0.3s linear 0s;

           -o-transition: all 0.3s linear 0s;

              transition: all 0.3s linear 0s;}

img:hover{opacity: 1.0;

      -webkit-transition: all 0.3s linear 0s;

         -moz-transition: all 0.3s linear 0s;

           -o-transition: all 0.3s linear 0s;

              transition: all 0.3s linear 0s;}

4ª Forma, não transparente para transparente em foco do mouse com efeito de fade.

Estas linhas de CSS vai fazer o oposto do anterior. Imagens vai desaparecer transparente em foco do mouse. Localize com o CTRL + F:  <style type="text/css"> </style> e cole o codigo abaixo entre  <style type="text/css">COLE AQUI</ style>


img{
      opacity: 1.0;
      -webkit-transition: all 0.3s linear 0s;
         -moz-transition: all 0.3s linear 0s;
           -o-transition: all 0.3s linear 0s;
              transition: all 0.3s linear 0s;}
img:hover{opacity: 0.6;
      -webkit-transition: all 0.3s linear 0s;
         -moz-transition: all 0.3s linear 0s;
           -o-transition: all 0.3s linear 0s;
              transition: all 0.3s linear 0s;}

Prontinho se você quer ver os exemplos, vá nesse tumblr onde eu tirei as informações e traduzir.