Colocar botao sobre a imagem

DESCULPE pelo TITULO ERRADO ;/

Queria saber como eu boto na minha imagem o efeito de quando PASSAR o mouse sobre ela, ela ficar cinza escuro com opacidade.. na classe IMGS no caso

<div class="destq">
<div class="imgs">
<a href="bf4.html"><img src="images/bf44.png"/></a>
</div>
<a href="bf4.html"><button>Battlefield 4</button></a>
<a href="bf4.html"><b>Battlefield 4 é um jogo de tiro em primeira pessoa desenvolvido pela EA Digital Illusions CE e publicado pela Electronic Arts.</b></a><p> </p>
<p>Em Julho de 2012, Battlefield 4 foi anunciado não oficialmente, depois de ter sido publicitado que os clientes que fizessem a pré-reserva de Medal of Honor: Warfighter teriam acesso antecipado à beta de Battlefield 4.. <a href="bf4.html">Leia Mais</a></p>
</div>

.destq {
	height: 270px;
	width: 800px ;
	clear:both;
	margin-top:60px;
	margin-left:35px;
	border-bottom: #FFF;
}
.destq {
	position:relative; /*levanta img */
 padding:0px;
}

.destq:hover {

	top:-2px;
	box-shadow: 2px 2px 2px 2px #982c40;
}

.destq img{

	float:left;
	margin:0 20px 10px 0;
}

.destq button{

	position: absolute;
	top:0px;
	left:0px;
	background-color: #982c40;
 width: auto;
 height: auto;
 padding:6px;
}

.destq b{

	font-size:20px;
	font-family: Verdana, Geneva, sans-serif;
}

.destq a {

	color: #982c40;
}

.destq a:link {

	text-decoration: none;
}

p {

	color: #CCC;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.imgs {
	width: 400px;
	height: 270;
}

.imgs hover{

	background-color: #333;
	opacity: 0.80;
}

	background-color: #333;
	opacity: 0.8;
}