quinta-feira, janeiro 22, 2015

Colocar opacidadade nas imagens do post


Olá pessoal, hoje o tutorial é como colocar opacidade nas imagens do post, tipo esse efeito que eu uso (↑). Caso você não entendeu sobre o efeito, veja aqui o preview; O tutorial é super simples, então lets go!

Tutorial


1♥ vá no modelo → editar html → dê ctrl+f ou F5 e pesquise: /* Posts , se você nunca mexeu nessa parte do seu layout abaixo do código que você pequisou,  você encontrará o seguinte código:
h3.post-title {
  margin-top: 20px;
}
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  text-decoration: underline;
}
.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}
.post-body {
  line-height: 1.4;
  position: relative;
}
.post-header {
  margin: 0 0 1em;
  line-height: 1.6;
}
.post-footer {
  margin: .5em 0;
  line-height: 1.6;
}
#blog-pager {
  font-size: 140%;
}
#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}
2♥ Substitua todo o código ( ↑ ), por esse:
/* Posts
----------------------------------------------- */
.post img {
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}
.post img:hover {
filter: alpha(opacity:0.5);
KHTMLOpacity: 0.5;
MozOpacity: 0.5;
-khtml-opacity:.50;
-ms-filter:"alpha(opacity=50)";
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}
Depois só salvar *-*

Espero ter ajudado, deixe o seu comentário aqui em baixo, vou adorar respondê-lo :)

3 comentários:

  1. Oi Naaty, Td bem?
    Obrigada por seguir meu blog :3
    E por comentar!
    Seu blog é mt fofo e organizadinho :)
    Adorei Td, já estou indo seguir :3

    ResponderExcluir
    Respostas
    1. Blog:
      Simplyonestory.blogspot.com.br

      Excluir
    2. Magina, adorei seu blog ♥ sempre que der vou dar uma passada lá *-* bjs ♥

      Excluir

Comente: dúvidas, sugestões, recadinhos fofos pra mim ♥ e tudo que quiser , menos desrespeito e palavrões okay? Quer que eu visite seu blog? Claro só comentar o link ♥

Mais regras em Regras do Cake