• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

4 de fevereiro de 2013

[Pedido] Legenda Kawaii nas imagens

 Hooý chocolates achocolatados com chocolate (haha')
 A Lavynnya do blog Questão de Opinião, me pediu pelos comentários para que eu postasse como fazer esse efeito que vocês estão vendo na imagem acima.

Vamos lá?!

Créditos: www // secundários: www
Existem dois tipos, o que vocês vêem acima é o tipo onde pode-se colocar texto e descrição:

Acima de ]]></b:skin>

cole:
.imgteaser {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width:100%; /* largura da imagem e da legenda */
  }
  .imgteaser a {text-decoration: none;}
  .imgteaser a:hover {cursor: pointer;}
  .imgteaser a img {
    background-color: #fcc; /* cor da moldura */
    border: none;
    margin: 0;
    padding: 5px; /* moldura */
    width: 100%; /* largura da imagem */
  }
  .imgteaser a .more { /* area do texto OPEN */
    background-color: #fcc;  /* cor de fundo */
    color: #ffffff; /* cor do texto */
    font-size: 14px; /* tamanho da fonte */
    padding: 5px 10px;
    /* transparencia */
    filter:alpha(opacity=65); /* IE genérico */
    opacity:.65; /* Firefox */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
    /* posicao */
    position: absolute;
    bottom: 14px;
    right: 10px;
  }
  .imgteaser a .desc {display: none;}
  .imgteaser a:hover .more {visibility: hidden;}
  .imgteaser a:hover .desc {
    background-color:#fcc; /* cor de fundo */
    display: block;
    margin: 0;
    width: 100%; /* largura */
    color: #ffffff;
    font-size: 12px;
    padding: 10px;
    /* transparencia */
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
    position: absolute;
    bottom: 14px;
    left: 10px;
  }
  .imgteaser a:hover .desc strong {
    display: block;
    font-size: 14px;
    line-height: 2em;
  }

Onde você quer que apareça, cole:

<div class="imgteaser">
  <a href="javascript:void(0);">
    <img src="URL da imagem" />
    <span class="more">&raquo; OPEN</span>
    <span class="desc">
      <strong>SUBTÍTULO</strong>
      TEXTO
    </span>
  </a>
</div>

O segundo modelo, é onde pode-se apenas colocar uma frase, para usá-lo:

Antes de ]]></b:skin>

cole:

.imgteaser {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width:100%;
  }
  .imgteaser a {text-decoration: none;}
  .imgteaser a:hover {cursor: pointer;}
  .imgteaser a img {
    background-color: #fee;
    border: none;
    margin: 0;
    padding: 10px;
    width: 100%;
  }
  .imgteaser a .more {
    background-color: #ff54aa;
    color: #ffffff;
    font-family:'Lobster' !important;
    font-size: 14px;
    text-shadow:0 1px #fee;
    padding: 5px 10px;
    width: 100%;
    /* transparencia */
    filter:alpha(opacity=65); /* IE genérico */
    opacity:.65; /* Firefox */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
    position: absolute;
    bottom: 14px;
    right: 10px;
  }

Onde você quer que apareça, cole:

<div class="imgteaser">
  <a href="javascript:void(0);">
    <img src="URL da imagem" />
    <span class="more">&raquo; TEXTO</span>
  </a>
</div>

Pronto, espero que tenham gostado do tutorial e o entendido. Dúvidas? Comente!



25 comentários:

  1. Muito fácil é fica lindo demais *-*
    Beijinhos
    http://cherrypimenta.blogspot.com

    ResponderExcluir
  2. Lindo mesmo! Lindo até de mais *_*
    littlejulieta.blogspot.com

    ResponderExcluir
  3. Muito obrigada! o seu tutorial tambem é bem explicado *_*

    ResponderExcluir
  4. Nossa, eu tinha procurado esse tutorial, muito fofo! Pode ser colocado numa ilustração de post com a prévia do post ou então no perfil do blog, realmente muito útil.

    E obrigada pelo carinho no TK, fiquei muito feliz lendo o que você me escreveu ^^

    Beijos!
    Too Kawaii

    ResponderExcluir
    Respostas
    1. Onw, de nada querida, eu é que agradeço, eu fiquei muito feliz também ^_^

      Excluir
  5. Obrigaada por postar esse tutorial \õ! Beijos
    questao-deopiniao.blogspot.com.br

    ResponderExcluir
  6. Que liindo (:
    Queria saber quais dias que eu post e também os horários de sua preferência!
    Beijos :*
    Emfrente-aoespelho.blogspot.com

    ResponderExcluir
    Respostas
    1. Qualquer dia que tiver tempo, só que tem de dar um espaço entre o tempo em que uma postagem foi ao ar para postar algo, para ser mais fácil dos leitores visualizarem todas as postagens

      Excluir
  7. Hannah, o link do meu face é
    https://www.facebook.com/manu.moraes.714?ref=ts&fref=ts

    ResponderExcluir
    Respostas
    1. aham, já vi quando você curtiu a nossa fan page, obg :)

      Excluir
  8. Muito lindo esse efeito, usarei no meu próximo layout.
    Aceita afiliação com o Candy Pictures ?

    ResponderExcluir
  9. Ótimo efeito!
    Seu blog é incrível!
    Kisses.

    http://ester-macedo.blogspot.com.br/

    ResponderExcluir
  10. Respostas
    1. Fico feliz em saber que meu amiguinho zumbi de chocolate gostou, haha'

      Excluir
  11. Onde coloca o segundo codigo???? no meu blog ta aparecendo o codigo no topo do blog... :'(

    ResponderExcluir
  12. Por favor me ajude queria muito mesmo esse efeito...

    ResponderExcluir
  13. Amei, fácil, rápido e fofo. Posso reblogar??

    ResponderExcluir