Maira Torresani 0 Denunciar post Postado Janeiro 14, 2016 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. Compartilhar este post Link para o post Compartilhar em outros sites
Junior Varoni 9 Denunciar post Postado Janeiro 14, 2016 Tente isso. outline:none; Compartilhar este post Link para o post Compartilhar em outros sites
Maira Torresani 0 Denunciar post Postado Janeiro 15, 2016 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. Compartilhar este post Link para o post Compartilhar em outros sites
L. Henrique 179 Denunciar post Postado Janeiro 15, 2016 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. Compartilhar este post Link para o post Compartilhar em outros sites
Maira Torresani 0 Denunciar post Postado Janeiro 15, 2016 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/ Compartilhar este post Link para o post Compartilhar em outros sites