4 replies to this topic

[Maykel Esser]

Olá amigos!

Tenho um carrossel em jQuery funcionando perfeitamente... mas gostaria de fazer alguns ajustes para melhorar o visual...

Quando abre o site, as imagens devem ter uma camada branca por cima dela... ao passar o mouse por cima, a camada branca desce... como posso fazer isso?

[codebox]$(document).ready(function() {
$('#galeriaFotos ul').jcarousel({
??????
});
});[/codebox]

[Édipo Costa Rebouças]

o que você pode fazer maykel e colocar um span dentro do li e manipular ele com css para ficar cima do link que vc estiver usando, deixa ele branco com opacidade, no mouseover, você da um hide nele, no mouseout, um show.

Edição feita por: Édipo Costa Rebouças, 20/01/2010, 12:14.

[Maykel Esser]

Então, pensando bem, pensei fazer da seguinte maneira:

[codebox]<ul>
<li class="boxgrid">
<a href="#"><img src="imagens/foto-teste.jpg" width="213" height="160" alt="Foto teste" /></a>
<div class="cover boxcaption">
<h3><a href="/paginas/view/53" class="title-link">Camaru 2009</a></h3>
<div class="content-boxcaption">
<p class="title-categoria">Clique e veja as 46 fotos</p>
<br class="clear">
</div>
</div>
</li>
</ul>
[/codebox]
[codebox] $('.boxgrid').hover(function(){
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:200});
}, function() {
$(".cover", this).stop().animate({top:'200px'},{queue:false,duration:200});
});[/codebox]
[codebox] #noticias li.boxgrid{
overflow: hidden;
position: relative;
}
#noticias li.boxgrid a, li.boxgrid img{
position:absolute;
}
#noticias .boxcaption {
background:#2F2F2F none repeat scroll 0 0;
color:#FFFFFF;
height:160px;
position:absolute;
width:213px;
z-index:5;
top:200px;
}
#noticias .boxcaption h3 {
display:block;
width:213px;
height:20px;
}
[/codebox]

Mas não aparece de jeito nenhum! Tem algo errado com o code?

[Édipo Costa Rebouças]

o problema é algo no seu css, o code js eu não mudei e funfo.

maykel = -css;
css+maykel=0;

rs


vamos ao verdadeiro code

#noticias{ 	display: block; 	} 	 	.boxgrid{ 	position: relative; 	display: block; 	width: 213px; height: 160px; overflow: hidden; 	background-color: #F00; 	} 	 	.boxgrid .boxcaption{ 	position: absolute; top: 200px; left: 0; 	display: block; 	width: 213px; height: 160px; 	background-color: #FFF; 	}

você usou #noticias no css mas no html que vc me passou não tinha, aqui acabei deixando na ul.

Edição feita por: Édipo Costa Rebouças, 26/01/2010, 12:10.
erros de português

[Maykel Esser]

NOSSA, que viagem, coloquei o código todo errado! auhahuhuahuahuauhauha
estou sem atenção!!! adorei a fórmula!

Vou fazer uns testes aqui e qualquer coisa posto aí!!