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. =)