Você pode usar o efeito transition tambem, fiz esse efeito ontem a noite nos meus produtos.
Eu fiz 2 DIVs
primeira peguei a <div class="product-block"> Aqui tem todos os elementos da lista do produto imagem, nome, descrição e preço.
a segunda no meu caso eu tenho uma DIV com class chamada <div class="action"> onde estão os botões de comprar e add list e visualizar e comparar, estão div esta dentro do "product block"
Aqui o HTML da pagina do produto seja ele o default.tpl, ou outro que venha a ser a configuração de modulo.
Código: Selecionar todos<div class="product-block">
<div class="conteinere">
<div class="image"><a href="#">
<img src="#" alt="Brinco" title="#" class="img-responsive"></a>
</div>
<h6 class="name"><a href="#">Nome do produto</a></h6>
<li >Ref.: BR103</li>
< p>Descrição.</p >
<p class="price"><span class="price-olds">R$ 10,00</span> </p>
</div>
<div class="action">
<div class="cart">
<button class="btn-action" data"><i class="fa fa-shopping-cart">Comprar</i></button>
</div>
<div class="quickview">
<a class=" quick-view"><i class="zmdi zmdi-eye">Detalhes do Produto</i></a>
</div>
</div>
</div>
Aqui o CSS que usei para fazer o efeito no caso uma transição da class="action" que vem de baixo para cima exibindo o botão de comprar e detalhes do produto
Código: Selecionar todos
.product-block{
max-height: 245px; /*Observar que é altura da caixa onde tem as informações, AQUI OBSERVAR PARA QUE OS BOTÕES FIQUEM FORA DO LIMITE DA ALTURA */
overflow: hidden; /*faz que tudo o que tiver fora da caixa não seja exibido* /
.action {
left:0px;
right:0px;
width:95%;
bottom:-10px; /*faz a div ficar 10px abaixo*/
position:relative;
-webkit-transition: all 0.4s ease-in; /*efeito de transição da saída da div da tela */
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.product-block:hover .action{
left:0px;
right:0px;
bottom:35px; /* ao passar o mouse a transição acontece da div sair da posição -10px para +35px*/
width:95%;
-webkit-transition: all 0.4s ease-in; /*efeito de transição da entrada da div da tela */
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
Acho que é isso.
Pode conferir aqui
http://www.makeupmaker.com.br
Essa é uma OC 1.5.6 mas fiz ontem em uma OC 2.0.1.1
Funciona.
abraços, espero ajudar