Personalizar a legenda das imagens

Ohayou, minnas ^^

O que venho ensinar hoje (após séculos sem postar) é um tutorial que mostra como personalizar a legenda das imagens. Aprendi-o graças ao blog Black words, recentemente, e modifiquei-o de modo a aparecer como na prévia, que poderão ver clicando em ler mais. É muito simples, e podem personalizá-lo de forma a combinar com o vosso blog. Vamos ao tuto:

Prévia: www

Como aplicar a legenda: esta imagem a ensinar é mesmo do blog Black words, então aí estão os créditos:

Tutorial:

Procure por

/b:skin

Em cima, acrescente:

.tr-caption { /legenda/

opacity: 0.5;

background: #e6e0dc; 

outline-offset: -2px;

outline: 1px solid #fff;

position: relative;

top: -25px;

padding: 2px;

font-family: silkscreen;

font-size: 8px!important;

color: #fff;

text-shadow: 1px 1px 0px #c7bdb7;

text-align: center;

-webkit-transition-duration: .60s;

-moz-transition-duration: .60s;

-o-transition-duration: .60s;

transition-duration: .60s;

}

.tr-caption:hover {

color: #fff;

background: #c486a8;

text-shadow: 1px 1px 1px #a85b83;

letter-spacing: 1px;

-webkit-transition-duration: .60s;

-moz-transition-duration: .60s;

-o-transition-duration: .60s;

transition-duration: .60s;

}

Só isso :)