Colocar botao sobre a imagem

[Madk 0]

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;
} 

[Carlos Henrique A. 7]

Boa noite amigo,

No seletor, no caso da classe .imgs,

 

Você coloca:

.imgs:hover{
	background-color: #333;
	opacity: 0.8;
} 

O que você fez de errado foi não colocar os ":".

Espero ter ajudado!

[Madk 0]

Valeu cara realmente era isso, ajudou muito, OBRIGADO.

 

Saberia como eu consigo deixar que nem este site http://gamesquad.xpg.uol.com.br/blog/ ao passar aparce o " + "no meio :

[Carlos Henrique A. 7]

@Madk

Nesse caso, já envolve jQuery..

 

Como não sou bom nessa area, não vou conseguir te dar um auxilio, mas pesquise sobre jQuery fadein, fadeout..

Vai achar o que precisa

[L. Henrique 179]

@Madk

Nesse caso, já envolve jQuery..

 

Como não sou bom nessa area, não vou conseguir te dar um auxilio, mas pesquise sobre jQuery fadein, fadeout..

Vai achar o que precisa

 

Carlos,

 

Na verdade não é necessário o uso de jQuery para essa função. Basta um pseudo-elemento (::before ou ::after) com propriedades :hover.

 

-------------------------------------------------

 

Madk,

 

Considerando a sua segunda questão no mesmo tópico, vou deixar um exemplo de como pode chegar nesse efeito sem a necessidade de jQuery.

 

Veja um exemplo que preparei aqui no JSFiddle.

[Carlos Henrique A. 7]

@L. Henrique

Interessante Henrique, eu não tinha conhecimento dessa propriedade.

 

Estudei o código e também muito me acrescentou em conhecimento..

 

Valeu!