Como Fazer Efeitos em Fotos e Imagens do Blog com CSS

Colocar efeitos em imagens usando códigos CSS. Veja como é fácil criar alguns efeitos nas imagens ou fotos do seu blog com CSS, como por exemplo, colocar bordas nas imagens, inclinar as imagens ao passar o mouse e outros truques com CSS e HTML para as imagens do seu blog.

Este tutorial é sobre usar CSS para criar efeito em imagens caso você esteja procurando programas ou sites para criar efeitos ou editar imagens veja o link a seguir:
Dicas sobre Colocar Efeitos em Fotos/Imagens e Como Fazer Banners

Vamos usar algumas imagens de outros tutoriais que já publicamos aqui no Dicas para Blogs como demonstração e os links dos tutoriais sobre cada um dos feitos CSS que vamos mostrar.

Inclinar Imagens ao Passar o Mouse: Este código pode ser aplicado a todas as imagens do blog de uma vez adicionando o CSS ao seu código HTML.

Efeito Girar (Rotacionar) Imagens com CSS


Trocar a Imagem Quando Passa o Mouse: Aqui vamos usar 2 imagens e o código precisa se adicionado em cada imagem que deseja usar o efeito.



Colocar ou alterar as bordas: pode criar um efeito de moldura da imagem e permite vários estilos diferentes de bordas.


Mover Imagem para cima ou para baixo ao passar o Mouse


Isso pode ser feito usando valores diferentes para as margens (padding) ao redor da imagem com o código:

img {
    padding-top: 2px;
    padding-bottom: 0px;
}
img:hover {
    padding-top: 0px;
    padding-bottom: 2px;
}

Note que apenas invertemos os valores no efeito hover do CSS. Nós recomendamos usar o código deste jeito para evitar que o texto se mova quando colocar o mouse sobre a imagem. Veja mais informações sobre:
Para que Serve e Como usar o CSS
Diferença entre Margin e Padding

Esperamos que goste destas sugestões para colocar efeitos nas imagens do seu blog e aproveite para ver também alguns efeitos para usar em links de texto:
Como Colocar Efeito Arco-Íris nos Links do Blog
Efeitos em Links Usando Gifs Animados como Imagens de Fundo

5 comentários:

  1. Legal Fabiano,

    Estava procurando por isso já faz um tempinho, é possível no lugar de Inclinar Imagens, ela girar a 360º graus?

    Obrigado.

    ResponderExcluir
    Respostas
    1. eu já vi esse efeito da imagem girando mas não tenho o código.

      com esse que mostrei não é possível fazer pois se girar 360 voltará a mesma posição do inicio

      Excluir
    2. . Tem Sim eu Ja Usei no meu Blogg e aconselho vs a usar é super bonito , da um um super destaque e deixa o seu Blogg mais personalizado. Nesse blog vs pode procurar e tenho certeza qe vs vai achar. O bom desse bloq que vs pode achar varias posibilidades de personalizar seu blogg e uma delas é que eu tambem achei esse efeito de girar nesse blog ! Espero ter ajudado abraços.

      Excluir
  2. Boa tarde amigo eu precisava de um codigo html para colocar mais de uma imagem

    ResponderExcluir
    Respostas
    1. sim pode usar quantas imagens quiser, mas o efeito é somente aquela que o mouse está em cima

      Excluir