melhor maneira de fazer efeito de imagem que escurece?

[Eduardo Henrique Barbian 0]

Boa tarde pessoal.

 

Estou tentando fazer um link com uma imagem de fundo, e um texto sobre ela, que quando o mouse em cima ela escurece.

O texto também quero que esteja na parte de baixo.

 

Basicamente é isso: http://jsfiddle.net/hddomg2p/2/

 

porém não acho que seja a melhor forma de fazer.

[lucaswxp 22]

Não vejo nada de errado com a abordagem que você decidiu tomar... uma alternativa seria usar um overlay que cobrisse a imagem e trabalhasse com posicionamento absoluto. Pseudo-elementos te ajudaria a não sujar o HTML.

 

Uma vantagem é que seria compatível com IE8, a sua abordagem usa rgba, que não é.

 

Outra forma, sem depender de overlay, seria deixar o background abaixo da imagem como preto. E on mouse over, você diminui a opacidade da imagem.

[Eduardo Henrique Barbian 0]

Não vejo nada de errado com a abordagem que você decidiu tomar... uma alternativa seria usar um overlay que cobrisse a imagem e trabalhasse com posicionamento absoluto. Pseudo-elementos te ajudaria a não sujar o HTML.

 

Uma vantagem é que seria compatível com IE8, a sua abordagem usa rgba, que não é.

 

Outra forma, sem depender de overlay, seria deixar o background abaixo da imagem como preto. E on mouse over, você diminui a opacidade da imagem.

Como seria feito a primeira alternativa? Sou iniciante e não manjo muito

 

 

Fiz desse jeito, achei um pouco melhor. http://jsfiddle.net/3yvtk9sz/

Mas o modo com overlay indicado antes não faço ideia de como fazer

PS: como faço pra editar meu post?

[lucaswxp 22]

Eu iria com a versão que você fez, fica mais simples assim.

 

O overlay, basicamente, você teria outra div, do lado da img, com background preto e position absolute. Esse overlay encobriria a imagem principal e ao passar o mouse a opacity diminui.