olá pessoal recebi comentários sobre estilizar imagens com css, Efeitos de imagem Hover na blogosfera! do JOÃO LUCAS CHAVES adi min do blogs JordinBR . que por sinal é um excelente blogs também e esta de parabéns.
ele gostaria de saber como introduzir os códigos que teve dificuldades e não deu certo no blogs dele pois vamos revisar e simplificar as coisas aqui mão a obra.
O efeito Hover em Bordas, muda a aparência de um item quando passamos o mouse em cima dele.
Usando CSS no Blogger, você pode adicionar estilos diferentes para suas imagens, inclusive adicionar bordas com efeito hover em determinadas imagens, para isto basta definir estilos aos elementos, incorporando-os no CSS do seu template.
Veja a seguir alguns exemplos de imagens com efeito hover na borda:
Para ativar o efeito do exemplo 1:
Vá em Layout >> Editar HTML , não precisa clicar em "Expandir modelos de widgets",e acrescente uma nova 'class'. Copie o código abaixo e cole-o ANTES da tag ]]>
.border1 img{
padding: 5px;
background: #ffffff; /*Edite a cor de fundo*/
border: 1px solid #54692A; /*Edite a cor de borda*/
}
.border1 img:hover {
padding: 2px;
background:#FFFFFF; /*Edite a cor de fundo*/
border: 4px double #9C192A; /*Edite a cor de borda*/
}
Para ativar o efeito do exemplo 2:
Vá em Layout >> Editar HTML , não precisa clicar em "Expandir modelos de widgets",e acrescente uma nova 'class'. Copie o código abaixo e cole-o ANTES da tag ]]>
.border1 img{
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
margin:2px 2px 2px;
}
.border1 img:hover {
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
background:#8B795E; /*Edite a cor de fundo*/
border:3px solid #000000; /*Edite a cor de borda*/
margin:2px 2px 2px;
}
Cada vez que quiser adicionar o efeito hover em bordas em alguma imagem é necessário que você hospede as imagens que irá utilizar.
Feito isto, você precisará aplicar as propriedades a cada imagem, separadamente, e deverá acrescentar uma condicional no local onde você quer que o efeito se aplique.
Por exemplo: para aplicar este efeito em uma imagem no post, no modo "editar HTML" da postagem, acrescente a seguinte linha como a que esta em baixo e colocará a ulr-da-imagem no local indicado na cor vermelha ok:
URL-DA-IMAGEM"/>
Use a imaginação e boa sorte a todos que fizer uso destas dicas ok !
Categories : 