Olá pessoal
Estou com problema ao utilizar o hover, criei um botão que tem uma imagem como background, queria que toda vez que eu passar o mouse, o botão ficaria escuro, ou seja, diminuiria a transparência do mesmo. Já tentei colocar um segundo background com opacidade de 0, e quando passasse o mouse, opacidade ficaria 1, mas não deu certo. Poderiam me ajudar?
HTML
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
<meta charset="utf-8">
<title>--.--</title>
<link rel="stylesheet" type="text/css" href="--..--.css">
<!--<link href="css/hover.css" rel="stylesheet" media="all">-->
</head>
<body>
<h1 id="pcp"> 選べ </h1>
<button class="first">
</button>
</body>
</html>
CSS
.first {
background-image: url(001-T.png);
}
Tudo que eu tentei não deu certo, já criei até um subclass com :before, mas em vão, então só restou isso do css, pois é o background.
