Design

Como criar imagens com transparência ao passar o mouse usando CSS

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Nesse tutorial básico você verá, de forma simplificada e bastante acessível, como criar um efeito de transparência em imagens exibidas em seu blog ou site. Ao passar o mouse sobre ela, perderá a transparência, ganhando destaque. Com um pouco de CSS, você conseguirá esse efeito simples mas de grande utilidade, podendo criar botões, banners, etc.

Anos atrás, era preciso uma verdadeira “gambiarra” para obter alguns bons efeitos de hover (rolagem, quando o mouse passa sobre o objeto), com Javascript e um monte de código. Mas com a modernização dos navegadores e a implementação de novas regras nas folhas de estilo, o trabalho dos designers tornou mais simplificado e confortável.

O efeito funciona bem nos principais navegadores, em suas versões mais recentes.

Primeiro, vamos colocar na página a imagem com link que receberá o efeito; foi inserida  normalmente através de HTML:

<a class="transp" href="#"><img src="https://www.tutoriart.com.br/wp-content/uploads/2011/11/minilogo100x100.jpg" alt="" /></a>

O que resulta em:

Note que foi dada a classe “transp” ao link. Agora vamos criar a porção de CSS que dará transparência à imagem, usando essa classe e o seletor img, pegando a imagem dentro do link “transp”.

.transp img {
	-moz-opacity: 0.5;
	opacity: 0.5 ;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	filter: alpha(opacity=50); 	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; 	
}

A propriedade -moz-opacity serve para versões mais antigas do Firefox, enquanto a opacity é aceita por todos os navegadores mais modernos.

Para compatibilidade com versões muito antigas como Safari 1.x (provavelmente quase nenhum de seus visitantes), seria preciso ainda usar a propriedade -khtml-opacity, o que será deixado de fora aqui. O opacity é aceito por navegadores mais modernos.

O primeiro filter garante o funcionamento do efeito também no Internet Explorer entre 6 e 8 (alguns elementos, dependendo de outras propriedades, como não declaração de largura e altura, podem não funcionar nas versões mais antigas do Internet Explorer).

O segundo filter funciona no IE 8. O último garante o funcionamento caso o usuário de IE esteja no Modo de Compatibilidade ativo.

Os valores usados farão com que nossa imagem tenha 50% de opacidade. Para torná-la mais visível, é só aumentar o valor (em filter, os valores vão de 0 a 100, e nas outras classes, de 0 a 10, incluindo valores decimais).

Nossa imagem, já com essas propriedades inseridas na folha de estilo, deverá ficar um pouco transparente, assim:

Agora, criando o efeito hover:

.transp img:hover {
	-moz-opacity: 1;
	opacity: 1 ;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	filter: alpha(opacity=100); 	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
}

Passe o mouse sobre a imagem.

Ao passar o mouse sobre a imagem, ela adquire as características de opacity 1 (opacidade total) em vez de 0.5 (50% opaco).

Para conseguir o efeito contrário, como especificado no título do post — o efeito de transparência ao passar o mouse — é só inverter as propriedades das classes normal e hover (acho que fica melhor assim, mas talvez sua necessidade seja outra).

Foi um exemplo bem simples, mas serve para ilustrar o funcionamento da propriedade opacity. Com ela, e sua criatividade, você vai criar bons efeitos em menus, botões, imagens do post, etc.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

6 Comentários

  1. Heeey parabéns pelo tutorial, ótimo efeito. Esse código parece não ser mais compatível com Google Crome, funcionou apenas no meu Mozilla Firefox. Abs!

Deixe um Comentário

Pin