Hover

AsxCle · Fevereiro 10, 2019

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">

</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.