1.2.15

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 :)

1 comentário: