Estilos de imagem com CSS

Aprenda como usar estilos de imagem com CSS.

Imagem arredondada

usar border-radius cria imagens arredondadas usando a propriedade:

Exemplo

Imagem arredondada:

img {
  border-radius: 8px;
}

Experimente você mesmo

Exemplo

Imagem circular:

img {
  border-radius: 50%;
}

Experimente você mesmo

miniatura de imagem

usar border cria miniaturas usando a propriedade.

Miniatura:

Café

Exemplo

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

Experimente você mesmo

como miniatura de link:

Exemplo

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Experimente você mesmo

Imagens responsivas

As imagens responsivas ajustam automaticamente para se adaptar ao tamanho da tela.

Se você deseja redimensionar a imagem conforme necessário, mas evitar que ela seja ampliada além do tamanho original, adicione o seguinte código:

Exemplo

img {
  max-width: 100%;
  height: auto;
}

Experimente você mesmo

Dica:Em nosso Tutorial CSS RWD Aprenda mais sobre design web responsivo.

Centralizar imagem

Para centralizar a imagem, defina as margens laterais externas para auto e defina-o como um elemento de bloco:

Café

Exemplo

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Experimente você mesmo

Fotografia Polaroid / Cartão

Tulipa

Tulipa amarela

Tulipa

Tulipa vermelha

Exemplo

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
  text-align: center;
  padding: 10px 20px;
}

Experimente você mesmo

Imagem transparente

opacity O valor da propriedade varia de 0.0 a 1.0. Quanto menor o valor, mais transparente é:

Tulipa

opacity 0.2

Tulipa

opacity 0.5

Tulipa

opacity 1 (padrão)

Exemplo

img {
  opacity: 0.5;
}

Experimente você mesmo

Texto na imagem

Como posicionar texto dentro de uma imagem:

Exemplo

Logotipo CodeW3C.com
Canto inferior esquerdo
Canto superior esquerdo
Canto superior direito
Canto inferior direito
Centralizado

Experimente você mesmo:

Canto superior esquerdo Canto superior direito Canto inferior esquerdo Canto inferior direito Centralizado

Filtros de imagem

CSS filter A propriedade adiciona efeitos visuais (como desfoque e saturação) ao elemento.

Atenção:Internet Explorer ou Edge 12 não suportam a propriedade filter.

Exemplo

Mudar a cor de todas as imagens para preto e branco (100% cinza):

img {
  filter: grayscale(100%);
}

Experimente você mesmo

Dica:Acesse nossa Manual de referência de filtros CSS，para obter mais informações sobre os filtros CSS.

Sobrepósito de imagem ao passar o mouse

Criar efeito de sobreposição ao passar o mouse:

Exemplo 1

Fade in text:

Avatar
Hello World

Experimente você mesmo

Exemplo 2

Fade in box:

Avatar
Bill

Experimente você mesmo

Exemplo 3

Sliding in (up):

Avatar
Hello World

Experimente você mesmo

Exemplo 4

Sliding in (down):

Avatar
Hello World

Experimente você mesmo

Exemplo 5

Sliding in (left):

Avatar
Hello World

Experimente você mesmo

Exemplo 6

Sliding in (right):

Avatar
Hello World

Experimente você mesmo

Inverter imagem

Mova o mouse sobre a imagem:

Parque Esportivo

Exemplo

img:hover {
  transform: scaleX(-1);
}

Experimente você mesmo

Biblioteca de imagens responsiva

Podemos usar CSS para criar uma biblioteca de imagens adaptativa.

Este exemplo utiliza consultas de mídia para rearranjar imagens em diferentes tamanhos de tela. Ajuste o tamanho da janela do navegador para ver os efeitos:

Exemplo

.responsive {}}
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsive {}}
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .responsive {}}
    width: 100%;
  }
}

Experimente você mesmo

Dica:Acesse nosso Tutorial CSS RWD Aprenda mais sobre design de web responsiva aqui.

Janela modal de imagem (Image Modal)

Este é um exemplo de como CSS e JavaScript colaboram.

Primeiro, use CSS para criar a janela modal (diálogo) e esconda-a por padrão.

Então, quando o usuário clicar na imagem, use JavaScript para exibir a janela modal e exibir a imagem dentro da janela modal:

Campo de Grama

Experimente você mesmo