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?
2 Respostas
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.
-
1Seria 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– Sveen6/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. 6/05/2018 às 14:50
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">