No tutorial de hoje vou ensinar a vocês como criar um efeito simples, porém interessante com o Jquery, na qual ele mostra a descrição/legenda da imagem quando passamos o mouse em cima dela, com um efeito deslizante do animate.

Primeiramente vamos criar o nosso css, para estilizarmos nossa caixa de descrição.

 div.destaque{ width:500px; /* as dimenções do caixa de destaque*/ height:413px; overflow:hidden; border:3px #363D52 solid; /* cor da borda de destaque */ position:relative; } div.destaque img{ border:0px; /* isso é para tirar a borda da imagem com link que tem no ie7*/ } /*aqui é estilizado o caixa de descrição*/ div.destaque p{ background:rgba(0, 0, 0, 0.76); /* cor do fundo da descrição */ color:#FFF; /* cor do texto da descrição */ width:500px; /* largura da descrição*/ display:block; position:absolute; padding:5px; top:400px; }

Estilizado nosso css, vamos adicionar a chamada para nossa Jquery, e logo após vamos criar nossa função que será a responsável pela animação da descrição da imagem.

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

 $(function(){ $('.destaque').hover(function(){ //eleva a descrição para cima $(this).find('p').stop().animate({top:'369px'},300); },function(){ //volta a descrição para baixo $(this).find('p').stop().animate({top:'400px'},300); }) });

Agora finalmente vamos adicionar o HTML para podermos exibir na tela nossa representação.

 <div class="destaque"> <a href="#"><img alt="" src="//www.gigasystems.com.br/images/reuniao.jpg" title=""/></a> <p>Efeito de legenda com jquery</p> </div> 

Pronto, basta seguir passo a passo nossa dica que funcionará perfeitamente nosso tuto, o efeito se quiser, pode ser aplicado juntamente à imagem também, podendo dar um efeito deslizante tanto na imagem quanto na legenda, basta add esse javascript:

 $(function(){ $('.destaque').hover(function(){ //eleva a imagem 10px $(this).find('img').stop().animate({marginTop:'-10px'},200); //eleva a descrição para cima $(this).find('p').stop().animate({top: '369px'},300); },function(){ // volta a imagem $(this).find('img').stop().animate({marginTop:'0px'},200); //volta a descrição para baixo $(this).find('p').stop().animate({top:'400px'},300); }) }); 

Nunca é demais lembrar, que os atributos alt e title da tag img muitas vezes deixados de lado pelos desenvolvedores, são muito importantes para o SEO, portanto faça o uso correto destes e obtenha bons resultados.

Bom, por hoje foi isso pessoal, dúvidas, críticas ou sugestões comentem abaixo que teremos o prazer em ajuda-los. =)