1

Seguinte to criando um site e na parte de galeria eu criei uma função para quando passar o mouse sobre a imagem criar uma margem, mas, a imagem ficar ligeiramente maior. Gostaria de saber se seria possível manter ela estática?

1
  • Pode explicar melhor essa margem?
    – user60252
    6/05/2018 às 14:33

2 Respostas 2

1

Isso resolve seu problema Box-sizing, apenas CSS:

box-sizing: border-box;

Uma vez que os elementos construtores HTML são caixas, deveria ser considerado que, o tamanho da caixa inclui sua borda, mas não é o que acontece, então a propriedade box-sizing resolve o problema, ela mantém o tamanho definido, por exemplo width:50% mesmo com uma borda border:10px solid;, a caixa ainda terá apenas 50% e não 50%+20px.

2
  • 1
    Seria melhor que você desse pelo menos um exemplo com um resumo, e usar o link como referência, ou se não mover a resposta para a sessão de comentário
    – Sveen
    6/05/2018 às 14:40
  • @Sveen ainda sou novato, mas obrigado pelo conselho, vou procurar ser mais calro nas respostas, sempre fazia pesquisas aqui no StackOverflow, a anos, mas só agora resolvi integrar ao grupo de participação, quero fazer o melhor para ajudar. Gratidão.
    – Wees Smith
    6/05/2018 às 14:50
0

A imagem tem 333x400, no hover diminui 4px de cada dimensão que corresponde ao dobro da espessura da borda.

.efeito:hover{
  border: 2px solid #ff0000;
   width: 329px;
   height: 396px;
}
<img class="efeito" src="https://marketingdeconteudo.com/wp-content/uploads/2017/01/giphy-7.gif">

<img class="efeito" src="https://marketingdeconteudo.com/wp-content/uploads/2017/01/giphy-7.gif">

Aqui com borda = 10px

.efeito:hover{
border: 10px solid #ff0000;
 width: 313px;
 height: 380px;
}
<img class="efeito" src="https://marketingdeconteudo.com/wp-content/uploads/2017/01/giphy-7.gif">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .