Como aplicar transparência em imagens utilizando css?

Aprenda de forma simples como alterar a transparência (opacidade) de uma imagem apenas utilizando CSS. Simples, mas uma técnica bastante funcional que você pode utilizar em galerias de imagens ou para efeitos ‘crossover’ (quando passa o mouse sobre a imagem).

Primeiro crie um novo arquivo HTML e um arquivo CSS, salve esse arquivo html como index.html no diretório raiz  e o outro estilos.css no diretório /css (crie o dir /css).

Voltando ao arquivo HTML… adicione o seguinte conteúdo:

<html>
<head>
	<title>Imagem Transparente com CSS | sistemabasico.com.br</title>
	<link href="css/estilos.css" rel="stylesheet" type="text/css">
</head>
<body>

</body>
</html>

Agora vamos entender pra que serve algumas linhas do código mais acima.

A tag title define o nome da página:

<title>Imagem Transparente com CSS | sistemabasico.com.br</title>

Logo abaixo é o caminho para o seu arquivo CSS externo, que criamos e salvamos na pasta /css, conforme mencionei no início deste tutorial:

<link href="css/estilos.css" rel="stylesheet" type="text/css">

E na tag Body, está vazia e se continuar assim, nada será exibido na página. Para
resolver este problema vamos inserir o código que exibirá uma imagem normal, sem efeito nenhum.

Nota: utilize uma imagem de sua escolha para o estudo deste tutorial, desde que esteja no mesmo diretório do arquivo HTML, mas se não tiver neste diretório, copie a imagem para este diretório para que não ocorra problemas. Na verdade o importante é sempre definir o caminho corretamente para as imagens e arquivos necessários para o sucesso deste aprendizado. O local propriamente dito não importa, porém eu sugiro a forma mais fácil de entender e não se perder, mas você tem liberdade para salvar os estilos, dar nomes, salvar as imagens de acordo que achar melhor.

...

<body>

<img src="uma-imagem.jpg" alt="Imagem com transparência" />

</body>

...

Da forma que está acima, você poderá visualizar a imagem na página, através de seu navegador web (recomendo FireFox), mas não poderá vê-la com a transparência aplicada, pois ainda não definimos um estilo CSS para tag img.

Abra o arquivo estilos.css e adicione o seguinte bloco de código CSS:

img
{
	opacity:0.5; /* Firefox & Chrome */
	filter:alpha(opacity=50); /* IE */
}

Nota: Aplicamos duas propriedades com o mesmo efeito para a tag img, pois o Internet Explorer utiliza filter:alpha(opacity:x) function (x = 0-100), mas o FireFox e Chrome utilizam a propriedade opacity:x (x = 0-1). 0 = invisível, 1/100 = 100% visível.

Lembra que incluímos o arquivo estilos.css no index.html através da tag link? Então, agora todas as imagens que forem inseridas no index.html sempre apresentarão o efeito aplicado através das propriedades que definimos para img no arquivo estilos.css.

Acesse o index.html com o seu navegador e veja imagem com o efeito aplicado.

Simples? Sim muito simples, mas através desta base você pode fazer coisa mais interessantes e leves apenas com CSS.

Então tá, vamos fazer algo um pouco mais interessante com o que aprendemos então.

Para aplicar um efeito que deixaria a imagem com suas cores normais ao passar o mouse sobre ela precisaremos apenas utilizar a função hover na tag img lá no nosso arquivo estilos.css.

Veja como ficaria o estilos.css completinho para o efeito que queremos:

img
{
	opacity:0.5;               /* Firefox & Chrome */
	filter:alpha(opacity=50);   /* IE */

}

img:hover
{
	opacity:1;               /* Firefox & Chrome */
	filter:alpha(opacity=100);   /* IE7+ */
}

Agora ao passar o mouse sobre a imagem ela recupera suas cores e ao retirar volta a ter transparência.

Nota: IE6 só aceita :hover em tags <a>

Espero que tenham gostado deste simplíssimo tutorial CSS sobre opacidade em imagens.

Bons estudos!

Tópicos relacionandos

Publicado por

Razor

Conhecedor das artes gráficas, amante de design web, amigo íntimo do desenvolvimento web, com a pretensão de aprender e ajudar à quem busca conhecimento, me faço presente. =)

9 comentários sobre “Como aplicar transparência em imagens utilizando css?”

    1. Primeiro:
      Não é SEUS, posto individualmente tutoriais por livre e espontânea vontade à todos que querem aprender coisas que eu já aprendi, as quais tenho prazer em passar a diante.

      Segundo:
      Se vc ler com atenção o tutorial, verá que burro é um animal de grande valor e não poderia ser a sua característica, pois uma pessoa ignorante do que significa respeito, não merece o tempo de ninguém. Esse site não é para você.

      Terceiro:
      Se ainda não entendeu o recado, é porque não viu que os códigos CSS estão no tutorial, mas como não sabe o que é CSS não os identificou.

      Quarto:
      Esse site definitivamente não é para você, nem o meu tempo.

      Bons estudos!

  1. Sempre tem um alguém que fica trolando =/
    Valew pela dica ae Roberto, me ajudou um monte aqui no desenvolvimento de um web site que estou trabalhando
    sucesso pra ti meu amigo
    grande abraço ;)

    1. Valeu @Yuri, o tutorial é bem simples, mas futuramente abordarei mais CSS.
      Acabo postando mais sobre PHP e MySQL por estar mais focado nisso no momento, mas farei alguns resgates de outras ferramentas sempre que eu conseguir um tempo.
      abraço.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *