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, 4 de março de 2018

Efeito de transição simples em imagens


Boa noite xexelentos da minha vidinha,  tudo bem? (ゝω♡) Demorou mas estou aqui novamente, estava um pouco ocupada com alguns trabalhos da faculdade, mas agora já estou de boas. Eu estou ficando gripada e meu corpo está doendo muito, tomara que eu não fique pior pois trabalhar com o corpo doendo e com ranho saindo do nariz não é legal. Eu estava pensando no que iria fazer, o que postar e dai lembrei deste efeito, na verdade já era para ter feito esse post a muito tempo...

Gente, e se seu falar que a mão já está coçando para trocar de layout? Sério mano, eu já estou com algumas ideias, porém irei esperar até abril pois vai ter comeback dos meus amados do BTS e da Taeyeon e dai quero ver qual será o conceito deles. O que eu mais gostar vai ser o novo tema daqui, sei que já fiz uns trocentos temas deles mas nunca me canso de criar layout com eles de tema. Da Taeyeon por outro lado seria inédito, então vamos esperar até lá para ver o que acontece >ω<

LIVE PREVIEW (*>3<'')

Para usar o efeito vá até o seu tema e dentro procure por: ]]></b:skin> e quando achar acima dele cole o seguinte código:

#fofura {width: 215px; height:150px; display: inline-block; overflow: hidden; position: relative; border: 6px solid #dce6ee;
}
.imagem1 {width: 215px; height:150px;margin-left: 0px; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s;
}
.imagem2 {width: 215px; height:150px;position: absolute; left: 250px; top: 0px; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s;
}
#fofura:hover .imagem1 {margin-left: -250px;
}
#fofura:hover .imagem2 {left: 0px;
}

Para usar as imagens em algum lugar crie um gadget  e dentro cole:

<div id="fofura">
<a href="/" title="nome do abigo aqui"
target="_blank"><img src="https://i.imgur.com/qmDI55c.png" class="imagem1"/>
<a href="/" title="nome do abigo aqui"
target="_blank"><img src="https://i.imgur.com/XqhQvih.png" class="imagem2"/>
</div>

Vocês podem mudar o tamanho da imagem e as cores da borda em volta da imagem.

3 comentários:

  1. Olá querida Roh!
    Boa sorte com a faculdade!
    Melhoras para você!

    O efeito ficou um amorzinho!
    Pode ser que use no meu próximo layout! Sempre colocando os devidos créditos!

    Tenha uma semana ainda mais abençoada!
    xoxo, Pam!

    https://palomari.blogspot.com/

    ResponderExcluir
    Respostas
    1. Olá amorzinho tudo bem? Obrigada linda.

      Gostou mesmo? Achei meia boca hahaha Ok então, fique a vontade =)

      Você também minha linda, beijos !

      Excluir
  2. ~ Annyeong! Tudo ótimo, Roh? =)

    Mal quero pensar em quando eu estar na faculdade, sei lá, parece bem difícil (tenho 12 anos rs). Melhoras!!
    Sério, seus layouts são os melhores que eu já vi. Do jeito que todos usariam, são perfeitos!
    Se você trocar de layout, tenho a máxima certeza de que ficará mais uma vez um sucesso. Comeback? Eu não sabia que iria ter, hahaha, devo não ser muito ligada nisso.
    O efeito é lindo! Obrigada por compartilhar com nós. Muito fofo!

    Beijinhoss Roh!
    ☾ ♥ HTML With Love ★ Vem nos visitar!

    ResponderExcluir

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