Link e imagem com efeito de 'transição'

novembro 15, 2017

Imagem de cute, kawaii, and rilakkuma


Konnichiwaa fadinhas e elfos! Como estão? Bloguinho está ativo de volta! O que acharam das postagens temáticas? Eu achei bem legal, mas me desviou um bocado dos posts fofinhos que gosto de fazer, ah! Enfim, hoje vou compartilhar com vocês um efeito para imagens do blog, ele mexe no contraste e nas bordas ao passar o mouse por cima, é super lindinho e dá até para colocar em links!! E então? Let's go?

Nos links, ao passar o mouse o fundo se move, para ver como fica, clique aqui : preview .
Curtiu? Então vá em Tema + Editar HTML e procure por ]></b:skin> , e cole acima dele:

a{
text-decoration:none ;
color:#BDA291 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ; }
a:hover{
color:#fff ;
background:url(https://imgur.com/GAPOcup.jpg);
background-position:50% 80%;
background-size:400px;
}


Na imagem fica como o exemplo abaixo, lindinho né?   :


Para colocar é o mesmo caminho, Tema + Editar HTML e procure por ]></b:skin> , e cole acima dele:

.post img{
box-shadow: 0px 0px 3px #FFFFFF;
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
background: url(https://imgur.com/GAPOcup.jpg);
background-position: top left;
padding: 6px;
border: 1px solid #fff;
}

.post img:hover{
-webkit-filter: contrast(200%);z-index: -99px;-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
background-position: bottom right;

}

Você pode escolher outros fundos para aparecer mexendo atrás, caso tenha algum que goste, copie o endereço e substitua no código o link: https://imgur.com/GAPOcup.jpg sem apagar os parenteses

➺ Se quiser deixar sem o contrate apague: contrast(200%);

Após colocar o efeito, todas as imagens da área de postagens ficarão com o efeito, se você usa algum outro tipo de imagem fora as principais, como por exemplo: ícones de compartilhamentos e mini gifs, vai aplicar neles. Mas não precisa desanimar! Tem um jeitinho para colocar em apenas 1 imagem!  

Substitua o .post img por .transicion { e .post img:hover{ por .transicion:hover{
Então toda vez que querer usar é só colar : <img class="transicion" src="URL da imagem" /> no html da postagem!

Resultado de imagem para rilakkuma bye gif

Por hoje é só! Espero que tenham gostado! Não esqueça, terá postagem toda segunda, quarta e sexta! Então segue o bloguinho e visite sempre! Vou responder todos amanhã e ainda sexta terá DIY, não perca! Até mais, Kissus! 



Leia também:

4 comentários

  1. Amei! tô querendo fazer um blog, vou tentar colocar esse efeito, achei lindo! bjus

    ResponderExcluir
    Respostas
    1. Fico feliz que gostou! Coloque! Vai ficar super diferente e legal *-* Qualquer duvida só chamar tá? Obrigada pela visita, kissus!

      Excluir
  2. Oi June,

    Que saudade. Fazia tempo que eu não passava por aqui. Já saí fuçando as postagens anteriores pra me atualizar do que eu perdi, haha.
    Como sempre gosto muito dos seus tutoriais, esse efeito de transição é lindo.
    Fiquei curiosa para saber do que se trata o DIY.
    Beijo, www.apenasleiteepimenta.com.br

    ResponderExcluir
    Respostas
    1. Oiii!

      Tá sumida mesmo hein, até eu na verdade xD ♥
      Aaah sério?? Obrigadaa *-* Fico feliz que gosta dos meus posts e tutoriais, até porque você já mexe com isso hehe . Menina, acredita que falei errado? X'D Mas depois de ter te deixado curiosa, fiz de tudo pra dar certo e postar kkk. Kissus!

      Excluir

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.