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

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!

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! 

Facebook | Twitter | Instagram | Bloglovin | Pinterest *