Faixa preta na parte de baixo da imagem

joseRenato · 29 de dezembro de 2012

Como neste site :

Alguém sabe o que eu devo pesquisar para ter algo semelhante a isto ? pois não sei nem o que colocar no google, além do mesmo titulo que botei aqui no fórum, mas não encontrei nada

DiF · 29 de dezembro de 2012

Olá JoseRenato,

Podes fazer isso com CSS. crie uma div dentro do container da imagem e aplicar um jquery para o evento de hover e etc..

joseRenato · 30 de dezembro de 2012

Esta dica realmente me abriu a minha mente... rsrs

Só que da forma que eu fiz, não iria dar muito certo pro meu caso, pois como no site que usei de exemplo, eu também tenho varias divs alinhadas uma do lado da outra até chegar a uma quantidade e ir para a fileira de baixo etc...

da forma que eu fiz, foi especifico apenas para uma imagem(ou seja, vai dar certo só para aquela imagem).Queria algo que deve ser para todas dependente da posição que a imagem estivesse...

Segue os códigos -

obs : eu criei estes códigos exclusivamente para fazer isto, por isso só tem uma imagem...

HTML - CSS :


<style type="text/css">
			#aaa {
				background:black;
				width:250px;
				height:24px;
				position:relative;
				top:-25px;
			}
</style>


</head>

<body>
					<div class="img">

								<img id="imagem" src="wallpaper/wall2.jpg" alt="Pro Games" border="0" >

								</img>
								</a>
							</div>

							<div id="aaa">

							</div>

Jquery :


$(function(){
		var div = $("#aaa");
		div.hide();

		$("#imagem").hover(function(){
			div.toggle();
		});
	});

Aqui o código da onde eu realmente quero aplicar isto :

<div class="conteudo">
<div class="img">
<a href="wallpaper/wallpaper1g.jpg" target="_blank" title="Clique Para Baixar Este WallPaper!">
<img id="imagem" src="wallpaper/wallpaper1.jpg" alt="Pro Games" border="0" />
</a>
</div>

<div class="img">
<a href="wallpaper/wall2G.jpg" target="_blank" title="Clique Para Baixar Este WallPaper!">
<img id="imagem" src="wallpaper/wall2.jpg" alt="Pro Games" border="0" />
</a>
</div>
<div class="img">
<a href="wallpaper/wall2G.jpg" target="_blank" title="Clique Para Baixar Este WallPaper!">
<img id="imagem" src="wallpaper/wall2.jpg" alt="Pro Games" border="0" />
</a>
</div>
<div class="img">
<a href="wallpaper/wall2G.jpg" target="_blank" title="Clique Para Baixar Este WallPaper!">
<img id="imagem" src="wallpaper/wall2.jpg" alt="Pro Games" border="0" />
</a>
</div>
</div>

joseRenato · 3 de janeiro de 2013

Conseguir resolver

Segue os códigos :

CSS - HTML :

Aqui eu apenas criei mais um div para a outra imagem(posicionei ela com css para sincronizar com a imagem)


                       #aaa {
				background:black;
				width:250px;
				height:24px;
				position:absolute;
				top:172px;
			}
			p {
				color:white;
				text-align:center;
				position:relative;
				top:-10px;
			}
			#bbb {
				background:black;
				width:250px;
				height:24px;
				position:absolute;
				top:172px;
				left:261px;
			}

					<div class="img">

							<img id="imagem" src="wallpaper/wall2.jpg" alt="Pro Games" border="0" >
							</img>
							<img id="imagem" src="wallpaper/wall2.jpg" alt="Pro Games" border="0" >
							</img>


					</div>
							<div id="aaa">
								<p>1800 x 1900 </p>
							</div>

							<div id="bbb">
								<p>1800 x 1900 </p>
							</div>

JS :

Aqui eu passei a não usar mais os ID's para chamar o elemento, e usei os seletores de ordem(eq)


$(function(){
		var div = $("#aaa");
		div.hide();

		var bbb = $("#bbb");
		bbb.hide();

		div.hover(function(){
			div.toggle();
		});
		$(".img img:eq(0)").hover(function(){
			div.toggle();
		});


		$(".img img:eq(1)").hover(function(){
			bbb.toggle();
		});
	});