15.8.16

Efeito legenda em hover nas imagens dos posts


Anneyeong amados tudo bem com vocês?  ヘ(= ̄∇ ̄)ノ Que semana essa que passou hein? Debut do tão esperado grupo feminino da YG family o Black Pink eu estou amando e confesso que superou todas as minhas expectativas, é tudo aquilo e um pouco mais. Quem fica dizendo o contrário é muito idiota e sem noção pois as meninas são ótimas e as músicas são sim perfeitas e muito viciantes! Na minha opinião elas talvez até possam superar o 2ne1 mas para mim o 2ne1 sempre será o melhor grupo feminino deles (^^)

E o debut do meu magrelo mais lindo mundo vocês viram? Eu ameiiii e lacrou demais, e quando toca a parte de Brazil até nova York? Eu quase tive um infarto gente (┰ω┰) O Suga merece isso pois ele é muito talentoso e sempre esperou por isso. Estou muito feliz por ele e pela Bighit ter dado essa oportunidade para ele ≧◇≦ Essa mixtape nunca foi tão esperada. E o comeback da diva Hyuna? Gente do céu, toda vez que essa mulier volta é de arrebentar a boca do balão né? Já ganhou dois prêmios com esse mini álbum ♡

Hoje trago a vocês um tutorial criado por mim por mera necessidade, eu queria muito um efeito de legenda em post, fucei um monte a net e não achei nada que eu gostasse então comecei a editar e até que saiu algo bem legalzinho. O efeito da legenda é o mesmo do meu blog pessoal o paradise of mind, não sei se vocês já viram mas fica bem legal e diferente, lembra muito os efeitos de legenda dos posts do tumblr.

LIVE PREVIEW aqui

Vamos ao tutorial? Então, vá até o seu modelo clique em editar html e procure por ]]></b:skin> acima dele você irá colar o código abaixo lembrando que irão editar praticamente tudo, fontes, opacidade, cor da fonte, estilo da fonte, tamanho da legenda e etc..

.legenda {
width:TAMANHO DA LEGENDApx;
font-family: cambria;
font-size: 14px;
font-style:italic;
color: #fff;
text-shadow: 1px 1px 1px #8e728e;
text-transform:lowercase;
text-align:center;
opacity:0.5;
background: url("http://i.imgur.com/LrzHbU6.png")repeat-x;
position:absolute;
margin-top: -40px;
margin-left: 3px;
padding: 5px;
-webkit-transition-duration: .80s;
cursor:hand;
}
.legenda:hover {
width:TAMANHO DA LEGENDApx;
font-family: cambria;
font-size: 14px;
font-style:italic;
color: #fff;
text-shadow: 1px 1px 1px #8e728e;
text-transform:lowercase;
text-align:center;
opacity:1.0;
background: url("http://i.imgur.com/LrzHbU6.png")repeat-x;
position:absolute;
margin-top: -40px;
margin-left: 3px;
padding: 5px;
-webkit-transition-duration: .80s;
cursor:hand;
}

 Na hora em que forem postar vocês irão na área de html do post e irão por o código abaixo da imagem que irá escolher.

<div class="legenda">
Aqui você irá por uma legenda bem legal</div>

No caso irá ficar assim:



8 comentários:

  1. Annyeong, Roh! Eu vou muito bem (~Ta mentira, tô tendo umas crises por causa da minha depressão, mas ninguém quer saber, então a gente mente, né?~) e você? Como foi o passeio de domingo? Espero que tenha se divertido e caçado muuuitos pokémons!

    GRAÇAS A DEUS ALGUÉM GOSTOU DE BLACKPINK (~como não gostar dessas meninas?~)!!!! A maioria das pessoas que eu conheço não gostaram do grupo, falaram que esperavam mais e que foi bem fraco. Tipo, oi? MEODEUS, na minha humilde opinião, as meninas LACRARAM. E assim como você, eu não esperava muita coisa não, então eu fiquei muito surpresa! E sendo sincera com você, eu gostei tanto das meninas que se elas continuarem incríveis desse jeito, provavelmente elas se tornarão meu grupo feminino utt *o* Não sei se elas vão superar 2NE1 (~porque 2NE1 é 2NE1, né?~), mas acho que elas vão manter bem o legado de grupo BADDEST FEMALE da YG, quando a 2NE1 parar as promoções (~porque infelizmente, isso um dia vai acontecer, né? T^T~). E você já tem bias? Eu amei a Jennie e a Lisa <3 Já considero elas minhas bias <3

    Sobre o debut do Yoongi, meodeus, o que falar... Nem sei o que falar! FOI LACRE TOTAL!!!! Eita meninu destruidor, viu? Ai, eu fiquei tãaao orgulhosa dele <3 Eu ainda não consegui ouvir o álbum inteiro, mas as meninas falaram que está maravilhoso e que dá pra fazer no mínimo mais uns 2 MVs. Ai, tomara, né? E eu suuuper concordo com você, o Suga mereceu demais esse momento. Espero que ele continue fazendo sucesso e realizando todos os seus sonhos, porque ele é um bolinho de arroz lindo, talentoso e merece tudo isso!

    FINALMENTE ALGUÉM FALANDO DA HYUNA!!!! Molier, me abraça <3 Conheço tão poucas pessoas que falam dessa MULHER DESTRUIDORA, e quando falam é pra falar mal: "ai, parece puta", "ai, totalmente desnecessário esse MV", "ai, péssimo conceito"... Como lidar com esses comentários? Socorro! A Hyuna é um amorzinho, não merecia ser "crucificada" dessa maneira ://

    QUE EFEITO LINDO! Adorei! Eu adoro efeitos em hover, então é claro que eu gostei desse ai também, né? Se eu vou usar? CLARO! Acho que vai ficar lindo no próximo layout que eu vou colocar no blog, mas acho que vai demorar um pouco pra eu colocar ele, tô tentando aguentar o layout atual o máximo que eu puder!
    Ah, acho suuuuper bacana quando você deixa o código para ser editado pela pessoa. Eu prefiro dessa maneira, do que quando o código vem prontinho, sabe? Se bem que não faz muita diferença, afinal é só alterar, né? Mas sei lá, gosto dessa forma kkkkk

    Como assim tu tem um blog pessoal? NEM SABIA! Vou dar uma stalkeada por lá!

    Enfim Roh, adorei o tuto, como sempre!
    Até o próximo post, ~chuuuuu

    ResponderExcluir
    Respostas
    1. Nossa amor você tem depressão? Que chato né? Eu já tive e sei muito bem o que se passa na nossa vida nessa época turbulenta, mas vai passar demora mas passa ;)

      Exatamente! Eu amei elas e para mim é o que importa, pois gosto é igual cu né?

      Sim, o meu magrelo merece isso e muito mais pois ele é muito talentoso e esforçado. Então ele merece todo o sucesso do mundo e muito amor dos fãs <3

      Pois é, como essa diva pode passar despercebida né? A beesha é muito lacradora e eu amo ela >.<

      Gostou? Até que ficou legalzinho né? Mexi mexi até que saiu algo que preste hahahahaha

      AUHSAHSUAHSa faz tempo, na verdade tenho ele a uns dois anos mas é bem difícil eu postar nele..

      Obrigada amore até o/

      Excluir
  2. Olá! Estou bem sim, obrigado. Como você vai?
    Rôh... esse Debut das meninas do BlackPink foi maravilhoso! Eu já pendo que é impossível de passar o 2NE1, mas pode acontecer. MEODEOS o debut solo do August D'! Eu não tive coragem de ver nada ainda, mas já amo. HyunA rainha, debutou com esse MV maravilhoso de "어때?" e com músicas maravilhosas como "꼬리쳐". Também morri com o DEBUT do lindo maravilhoso deuso Luizy, do 유니크. ESSE MÊS MATOU MUITOS.

    Vamos ao Tutorial. Eu amei essa legenda, deixa tudo mais "com a cara de quem escreveu" sabe? Talvez incorpore num próximo LAYOUT. ^ㅅ^

    안녕~ [ LH ]

    ResponderExcluir
  3. CHEGUEI!
    Uau, faz um bom tempo desde que brotei aqui, não é? Ou eu comentei no último post? Fico meio confusa porque eu leio e num comento *bem palhaça mesmo*Ah, eu escutei as duas músicas de Blackpink e achei elas bem legais, não são aquele tipo "nossa, vou escutar até a morte" então nem baixei, porque sei que enjoaria, mas eu gostei bastante das músicas, e também, adoro quando tem uma parte de rapper e depois entre a parte do vocal, nossa, eu no chão quando isso acontece -q Socorro, dels Yoongi matando as ARMYs novamente, já cansei de levar tiro. Adoro quando tem Brasil no meio :v Pelo que vi, não é só nessa música que envolve BTS e tem Brasil no meio, em mais duas o Brasil brota na letra, ain <3 Mas enfim, o Yoongi merece muito isso, ele lutou bastante e foi contra todos, inclusive seus pais para estar onde está hoje , e ele tem um talento incrível <3 Não acompanho nada da Hyuna não -q #perdida

    Eu acho muito fofinho legenda com hover mas nunca ponho nos meus layouts, se bobear, vou pôr no próximo porque já vou fazer uns paranauê envolvendo Min Yoongi no meio e.e Mas mona, esse jeito não é meio complicada, já que podemos usar usar o .tr-caption e tacar .tr-caption:hover, assim, deixando no automático sem precisar ter que ir no HTML do post? Mesmo assim, é um efeito muito fofo e talvez eu use mesmo, mas usando o negócio no automático porque sou preguiçosa mesmo de fazer tudo manualmente e.e Agora, vou-me embora~ ColdH★

    ResponderExcluir
  4. Estou bem sim. Eu gostei muito de BLACKPINK. E um perfeito all- kill não ? To começando a fazer um layout Novo, e postando um projeto no blog. E até amei esse tutorial, o problema é que nem sempre posto pelo computador, e fazer edições é sempre.difícil pelo cell mais enfim. Bjs

    http://d-elights.blogspot.com

    ResponderExcluir
  5. Eu estou muito feliz com a mixtape do Suga, não parava mais de ouvir as músicas. É bom ver ele feliz.
    Esses efeitos que tu posta é um mais lindo que outro, não é possível!

    http://yoo-ung.blogspot.com.br/

    ResponderExcluir
  6. Olá! Estou muito bem sim, obrigada por perguntar! E como vai você?
    Eu estava igual malucaaaaaaaaaaaaaa procurando esse tutorial a um tempinho atrás dai tentei fazer sozinha mas não deu nada certo :') Então deixei para depois. Hoje vim aqui no seu blog atras de um tutorial totalmente diferente e ai, pum, dei de cara com esse tutorial que eu mais precisava. Adorei! Já editei e coloquei no meu blog! Ficou uma gracinha. Deixei os créditos na página de créditos no meu blog.

    Beijos | http://yanaportela.blogspot.com.br/

    ResponderExcluir
  7. Roh-Chan! ♥ Quanto tempo, não? Eu estou bem e espero que você também. Eu não curto muito girl groups, já devo ter dito isto, mas se elas tem tanto potencial quanto as garotas do 2NE1, elas são incríveis. Estou vendo toda a blogosfera comentar sobre o debut, então vou ir ver também pra matar a curiosidade. Mas cara, Suga e Hyuna destruíram tudo, inclusive eu. O que é aquilo, cara? Sinônimo de lacrar são esses dois. Bias supremos.

    Esse tuto é um amorzinho, não é mesmo? Eu adoro. Costumava usar em todos os lays pra status e músicas, mas não coloquei nos últimos. Você me deu vontade de usar novamente. Muito bom, como sempre.

    Carinhosamente, Jheni.
    [empire k.] [written feelings] [stupide]

    ResponderExcluir

Olá! Se chegou até aqui é porque leu toda a postagem certo? Não? Poxa, comenta antes de sair e por favor, tente ler todo o conteúdo do post pois, por mais que a maioria do que eu escrevo seja sobre css e html, eu também comento sobre vários assuntos no mesmo post.

E abaixo, algumas regrinhas para seguir e fazer um comentário bem maroto:

1 - Comente apenas se sentir a vontade e queira.

2 - Seja educado, não use palavras inapropriadas, respeite os outros comentários e opiniões alheias.

3 - Se eu fico feliz quando comentam algo? Ô se fico, na verdade adoro!

4 - Antes de sair além de comentar deixe o link do seu bloguinho caso queira pois assim conseguirei lhe visitar e deixar um recadinho.

5 - Quer ser afiliado ao blog? Só pedir nos comentários ou na própria página direcionada a isto, estou precisando de afiliados mesmo rsrs.

Obrigada por tanto e obrigada por me acompanhar até aqui, fico muito feliz e grata pela sua companhia!

Roh ~

GNMH - LAYOUT E DESIGN POR RDS / CRIADOS EXCLUSIVAMENTE PARA ESTE BLOGUINHO ❤