Problema com scale no background-color

[Maira Torresani 0]

O problema é q eu tenho uma div, o hover dela faz o seguinte:

.box-small:hover{border: 1px solid #008BFF; transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05);}

dentro dessa div eu tenho uma imagem, com o fundo transparent, o hover dessa imagem muda o background-color dela:

.box-small:hover img{border: 0 !important; background-color: #008BFF;}

mas o problema é que está ficando tipo de uma borda quando dá o hover, eu já testei o mesmo efeito sem o scale e isso não acontece. Porém quando a box-small está com efeito de scale a imagem fica com esse tipo de borda.

O efeito está nessa página: http://nkl.kamersmarketing.com.br/ ali onde tem as linhas de produtos.

 

O que eu quero é evitar que fique com essas bordas na imagem com o hover.

[Junior Varoni 9]

Tente isso.

outline:none;

[Maira Torresani 0]

Não funcionou, mas testando com o

background-clip: content-box;

sumiu a linha em baixo, mas ainda fica nos lados da imagem como se a cor de fundo estivesse saindo fora.

[L. Henrique 179]

Certo, publique também o HTML e CSS para análise. Podemos te dar N soluções em cima desse seu :hover, mas não vai adiantar muito. Talvez o erro não esteja nem no hover.

[Maira Torresani 0]

O html:

<section class="content-maior bg-body"><h1 class="fontzero">Linhas de Produtos</h1>
            <a href="linha-medica"><article class="box-small al-center bg-body">
                    <img class="img-small" title="NKL Produtos Eletrônicos | Linha Médica" alt="NKL Produtos Eletrônicos | Linha Médica" src="<?php bloginfo('template_url'); ?>/img/nkl_produtos_eletronicos-icon_linha_medica.png">
                <h1 class="fontsize4b">Linha Médica<br><span style="visibility: hidden;">.</span></h1>
                <p class="tagline fontsize3">Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição </p>
            </article></a>
        
            <a href="linha-veterinaria"><article class="box-small al-center bg-body">
                    <img class="img-small" title="NKL Produtos Eletrônicos | Linha Veterinária" alt="NKL Produtos Eletrônicos | Linha Veterinária" src="<?php bloginfo('template_url'); ?>/img/nkl_produtos_eletronicos-icon_linha_veterinaria.png">
                <h1 class="fontsize4b">Linha Veterinária<br><span style="visibility: hidden;">.</span></h1>
                <p class="tagline fontsize3">Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição </p>
            </article></a>
        
            <a href="linha-de-medicao-e-monitoramento"><article class="box-small al-center bg-body">
                    <img class="img-small" title="NKL Produtos Eletrônicos | Linha de Medição e Monitoramento" alt="NKL Produtos Eletrônicos | Linha de Medição e Monitoramento" src="<?php bloginfo('template_url'); ?>/img/nkl_produtos_eletronicos-icon_linha_medicao_e_monitoramento.png">
                <h1 class="fontsize4b">Linha de Medição e <br>Monitoramento</h1>
                <p class="tagline fontsize3">Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição </p>
            </article></a>
       
            <a href="linha-de-seguranca-eletrica"><article class="box-small al-center bg-body">
                    <img class="img-small" title="NKL Produtos Eletrônicos | Linha de Segurança Elétrica" alt="NKL Produtos Eletrônicos | Linha de Segurança Elétrica" src="<?php bloginfo('template_url'); ?>/img/nkl_produtos_eletronicos-icon_linha_de_seguranca_eletrica.png">
                <h1 class="fontsize4b">Linha de Segurança <br>Elétrica</h1>
                <p class="tagline fontsize3">Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição </p>
            </article></a>
        </section>

O css:

/*imagem das 4 linhas*/
.content-maior a:link, .content-maior a:active, .content-maior a:visited{color: #444444;}
.content-maior a:hover{color: #008BFF;}
.box-small{position: relative; top: -200px; height: auto; width: 22%; margin: 0 1.5%; float: left; border: 1px solid rgba(0,139,255,0.5);
transition: all 0.05s ease-in-out;-webkit-transition: all 0.05s ease-in-out; -moz-transition: all 0.05s ease-in-out;}
.box-small:hover{border: 1px solid #008BFF; transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05);}
.box-small h1{margin-bottom: 3%;}
.box-small p{padding: 0 5% 8% 5%; margin: 0;}
.box-small .text{margin-top: 7%;}
.img-small{float: none; margin: 4% auto; transition: all 0.05s ease-in-out;-webkit-transition: all 0.05s ease-in-out; -moz-transition: all 0.05s ease-in-out; width: auto; position: relative; height: 75px; display: inline-block; background-color: #5A5E5E;}
.box-small:hover img{border: 0 !important; background-color: #008BFF;}

O problema pode ser visto nessa página: http://nkl.kamersmarketing.com.br/