CSS, Efeito clarear e escurecer em CSS

Quer colocar aquele efeito nas imagens que quando ambas são focadas com  o cursor   do mouse, elas escurecem ou     clareiam? Isso pode ser  facilmente obtido com CSS!   O ideal para se utilizar dessa possibilidade,  são nos ícones de redes sociais, ou nos banners de parceiros no qual poderá dar um destaque! Siga lendo este tutorial e saiba com fazer isso!

Copie o código CSS abaixo e cole no HTML do seu post.

<style>
.efeito img{
 border: #191919 solid 2px; /*esta linha aplica uma borda cor preta na imagem*/
 opacity: 1.0; /*esta linha é a que escurece a imagem*/
 }
.efeito img:hover{
 border: #191919 solid 2px; /*esta linha aplica uma borda cor preta na imagem*/
 opacity: 0.2; /*esta linha é a que clareia a imagem*/
 }
</style>

Após colar o CSS, copie o código HTML abaixo:

<div class="efeito"> Coloque aqui todo o código dos ícones/banners nas quais que que receba o efeito.
</div>

Depois de copiar cole no gadget em que se encontra as imagens/banners/ícones,  e mova todo o código das imagens/banners/ícones para o lugar do texto destacado em laranja e salve!

Você pode usar o mesmo código HTML para aplicar o efeito em outras imagens, seguindo o mesmo passo: copiar o código HTML, colar, e mover os códigos das imagens/banners/ícones para o lugar do texto em laranja.

OBS: Não é preciso repetir o CSS!!!