[Pedido] Legenda Kawaii nas imagens

» Passe o mouse Esse é o efeito Esse é o efeito que aprenderemos no tutorial

 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!