No CSS damos vida a divs e objetos, um exemplo é uma div comum, que mudar a cor ao passar o mouse sobre ela. Porém isso acontece sem nenhuma suavidade, por isso é que existe a propriedade transition.
Veja abaixo um exemplo, onde a imagem mudar sua opacidade (clique aqui e aprenda a criar uma opacidade) ao passar o mouse:

Código:
O grande segredo é o transition. Você também pode mudar o tempo na parte na parte 0.3s. Também é importante observar que existem vários transitions diferentes, isso é para que funcione normalmente em navegadores diferentes.
Não se esqueça de comentar! ;)