Dúvida site. Imagem sendo sobreposta por uma borda

Olá Vitor, Tudo bem?

Vendo o seu site notei que a imagem é um background da div .produto, e que a borda também está na div, neste caso o que ocorre é que a borda está sendo aplicada a div e o icone não é um outro elemento que pode ser posicionado acima, mas sim uma imagem de fundo da própria div.

Neste caso você não irá conseguir colocar a borda por baixo da imagem de fundo, o que você pode fazer é adicionar um elemento dentro das div.produto, este elemento quando a div for acionada muda o seu plano de fundo para o icone.

Dessa forma você pode fazer o seu elemento ficar sobre a borda.

Você pode mudar o estado de outro elemento usando o hover, por exemplo:


/** classe produto **/
.produto {
    witdth: 100px;
    height: 100px;
    background: #ccc;
    border: 2px #000 solid;
    position: relative;
}

.produto:hover,
.produto .icone:hover {
    border-bottom-width: 32px;
}

.produto .icone {
    opacity: 0;
    background-image: url(urldaimagem);
    height: 32px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    witdh: 100%;
    text-indent: -9000px;
    overflow:hidden;
}

.produto:hover .icone,
.produto .icone:hover {
    opacity: 1;
}

com um HTML como:

<div class="produto">
    <a href="url" class="icone">Comprar</a>
</div>

Dessa forma o icone e a div são elementos separados e podem ser sobrepostos.