JUNGKOOK
EUPHORIA - Wonder
[Welcome]
to garota no mundo html

olá xuxuzinhos, tudo bem? sintam-se a vontade e sejam bem vindos ao meu cantinho, este bloguinho foi criado em julho de 2012 e até hoje é direcionado a área de html e css. Tento ser criativa com códigos, sempre tento criar algo diferente. e se desejarem algo, por favor, não exitem e peçam pela minha ask ok? beijinhos bem doces..

domingo, 21 de janeiro de 2018

Descrição hover na imagem


Boa noite queridos (^ω^) Tudo bem com todos? Espero que sim, então, dei uma fechadinha básica por alguns dias no blog para troca de layout, a maioria vai se perguntar porque ela fez isso novamente. Então, eu amei o tema do Wanna one sabe, mas queria algo mais elaboradinho e com cara de html, o que eu quero dizer com isso? Bem, efeitos legais, layout com cara de blog de html mesmo. Os layouts anteriores estavam simples demais, então fui e mudei ^0^

E me desculpe pela demora de estar postando, mas tive que sair e só cheguei agora. Eu estou bem ansiosa pois tem tantos tutoriais e materiais para trazer para vocês. Eu fiquei um bom tempo pensando o que iria fazer e agora já sei tudo o que quero postar, vai ser de grande utilidade a todos. Até já deixei alguns posts em rascunho hihi Quero aproveitar e fazer isto antes que eu volte para a faculdade. Povo, se não der para ver o tuto em live preview vejam pela imagem.

Vamos lá então? LIVE PREVIEW (/*^3^)/

Vá até o modelo, cliquem em editar html e dentro procurem por </b:skin> quando encontrarem acima dele vocês irão colar o código abaixo:

/* ---  Character Box ---  */

#characters {
display:inline-block;
width:450px;
height:200px;
margin:0px 20px 35px 20px;
padding: 5px;
border: #COR 1px solid;
}
#characterimg {
width:450px;
height:200px;
z-index:-1;
opacity:0.8;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#characterimg:hover {
opacity:0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
/* ---  Character Hover Info ---  */
#charimg {
position:absolute;
height:145px;
width:145px;
margin-top:0px;
margin-left:0px;
z-index:2;
opacity:0.8;
}
#character {
position:absolute;
margin-top:-186px;
margin-right:10px;
margin-left:15px;
width:400px;
height:150px;
padding:10px;
background-color:#ffffff;
z-index:1;
opacity:0;
-webkit-transition: all 350ms linear;
-moz-transition: all 350ms linear;
-ms-transition: all 350ms linear;
-o-transition: all 350ms linear;
transition: all 350ms linear;
}
#character:hover{
opacity:1;
}
#characters:hover #character{
opacity:1;
}
#characterinfo {
position:absolute;
overflow:scroll;
margin-top:0px;
margin-left:155px;
width:245px;
height:145px;
height:160px;
}
.charname {
font-family: Georgia, sans-serif;
font-size:16px;
text-transform:none;
text-align:center;
font-style:italic;
color:#COR;
margin:10px 0 10px 0;
}
.charinfo {
color:#COR;
text-align:center;
letter-spacing:1px;
}
#characterinfo a {
border:0px;
text-decoration:none;
color:#COR;
font-style:italic;
-webkit-transition: all 10ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
}
#characterinfo a:hover {
color:#COR;
}

Prestem atenção, vocês podem alterar quase tudo, tamanho do fundo da descrição, a imagem do bias, cor da borda em volta e cor das fontes, qualquer coisa me perguntem, e para funfar os links, dentro de um gadget java script, cole o seguinte código:

<div id="characters">
<div id="characterimg">
<img src="IMAGEM DO FUNDO" />
</div>
<div id="character">
<div id="charimg">
<img src="IMAGEM DO BIAS" />
                         
</div>
<div id="characterinfo">
<div class="charname">NOME DO BIAS</div>
<div class="charinfo">
SUBTÍTULO AQUI

<p>
<p>

DESCRIÇÃO BEM FOFA SOBRE O SEU BIAS AQUI

</div></div></div>
</div>

Salve, depois olhe para ver se está tudo certinho, qualquer coisa volte e olhe todo o código do html para conferir se está tudo feito corretamente. 

E PARA QUEM NÃO CONSEGUE ABRIR O LINK CONFERE AS IMAGENS ABAIXO.



4 comentários:

  1. Oi Roh, tudo bem?
    Eu já apareci aqui algumas vezes mas acabo sempre sumindo, mas pode ter certeza que não irei mais.
    O problema de quando você fecha o blog é que tem muita gente que usa o GNMH pra fazer layout (tipo eu) e quando ele tá fechado a gente tem que dar um jeito procurando outros tutoriais.
    Eu achei esse layout muito fofo, como todos que você faz ^^
    Eu não consegui ver o live preview mas pelas imagens eu achei o menu legal, quem sabe um dia eu uso?
    Até mais~~
    margineus.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Tudo sim amore, pois é vê se não some mais né? Me perdoe por isso, mas eu enjoo muito fácil dos meus layouts e a diferença é que mais perco tempo trocando layout do que fazendo posts haha me perdoe.
      Ah muito obrigada, que bom que gostou, pois é, eu quis fazer um live preview mas deu fail T_T

      Beijos!

      Excluir
  2. Como vai, Roh?
    Nossa, adorei o seu blog! Sou nova aqui, mas já amei logo de cara. Eu amei essa descrição hover também, mas não pude utilizá-la, não sei porquê, de erro em muitas tags, mas tudo bem! Não sabia de seu blog, porquê eu não tinha feito um blog aqui também, mas realmente os seus tutoriais irão me ajudar bastante futuramente!
    Obrigada, achei você uma simpatia ^^

    ❥ Black HTML - Visite-nos! ✨

    ResponderExcluir
    Respostas
    1. Olá amore, vou bem sim obrigada!
      Sério? Muito obrigada linda, é bem fofa a descrição né? Sério que não conseguiu usar? Mas porque? Eu uso no blog de biases e não dá nenhum erro, queres ajuda?

      Ahh sério? que bom que criou um bloguinho, fico muito feliz, estou aqui para ajudar no que precisar tá? Boa sorte com o seu bloguinho <3

      Beijos =3

      Excluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)