19/09/2012

Tutorial: Colocar bordas hover nas imagens do blog

||

Yo! Ainda na maratona de tutoriais da semana trago um efeito bem maneirooooo! Ele e serve para colocar bordinhas em volta das imagens que ao passar o mouse ela muda de cor (hover) e a imagem fica com efeito de opacidade. Mas esse efeito só funciona nas imagens que você adicionar um código, apenas nas imagens que você desejar. E então vamos tentar?

Procure em seu HTML por ]]></b:skin>, acima dessa tag você cola

.efeitoimagem {
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
border: 3px solid #FF81C0; /*cor de borda*/
}
.efeitoimagem:hover {
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
opacity: .6; /*opacidade*/
border: 3px solid #41EAD9; /*cor da borda hover*/
}

E salve! Agora vá para seu layout e abra um gadget HTML/Java Script, e dentro cole o próximo código

<img src="URL da imagem" class="efeitoimagem"/></a>

Agora e só salvar e visualizar como ficou, espero que tenham gostado! Eu peguei esse tutu no blog Miki Candy todos os creditos vão para ela! Visitem! Vão amar.

2 comentários:

  1. Bom coloquei e vou ver se fica legal!


    http://contatudosobrekarinasilva.blogspot.com.br/

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram