Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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.
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.
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/
Tente isso.
outline:none;