Colocar efeito com borda ao passar o mouse

[Marcos Coelho2 2]

quero fazer um efeito parecido com da netshoes.com.br quando se passa o mouse em cima do produto que aparece uma borda e na parte de baixo a borda pega todo o titulo e preço do produto.

 

Como posso fazer isso?

[Alvaro Jr 2]

Exemplo de um Div

<div id="box1>
<img src="niketenis.png" title="tenis" />
<li>Tenis Nike</li>
</div>

/*Agora voce vai estilizar normalmente a div no css*/

#box1{
blackground-color="#000";
text-aling:center;
}
#box li{
color:#f9f9f9;}

/* agora vamos fazer :hover para quando passa mouser muda as propriedade igual do site mencionado*/

#box1:hover{
blackground-color="#d8d9d8";
text-aling:center;
}
#box li:hover{
color:#f290;}

</div>

le aparece um hover degrade voce pode fazer hover como uma img degrade ou usar css3

[Wanderson Valerio 102]

CSS

div.produto {
   width: 180px;
   height: 340px;
   padding: 5px;
   float: left;
}
div.produto:hover {
   /* Gradiente */
   background: #ededed;
   background: -moz-linear-gradient(top,  #ededed 0%, #ffffff 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#ffffff));
   background: -webkit-linear-gradient(top,  #ededed 0%,#ffffff 100%);
   background: -o-linear-gradient(top,  #ededed 0%,#ffffff 100%);
   background: -ms-linear-gradient(top,  #ededed 0%,#ffffff 100%);
   background: linear-gradient(to bottom,  #ededed 0%,#ffffff 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
   /* Gradiente */
}
div.produto img {
   width: 180px;
   height: 170px;
   float: left;
   background: #FFF;
   overflow: hidden;
}

 

HTML

<div class="produto">
   <img src="minha-imagem.jpg" alt="" />
</div> <!-- /div.produto -->

 

ATENÇÃO

O script acima, não foi testado, em caso de bugs me informar.