Event onmousenter

Asked

Viewed 22 times

1

Next to creating a website and in the gallery part I created a function for when passing the mouse over the image create a margin, but, the image get slightly larger. I wonder if it would be possible to keep it static?

javascript

  • Can you explain that margin better?

2 answers

1


That solves your problem Box-Sizing, only CSS:

box-sizing: border-box;

Since the building elements HTML are boxes, it should be considered that, the size of the box includes its edge, but it is not what happens, so the property box-sizing solves the problem, it keeps the size set, for example width:50% even with one edge border:10px solid;, the box will still have only 50% and not 50%+20px.

  • 1

    It would be better if you gave at least one example with a summary, and use the link as a reference, or if you don’t move the response to the comment session

  • @Sveen I’m still a beginner, but thanks for the advice, I will try to be more blunt in the answers, I was always doing research here at Stackoverflow, for years, but only now I decided to join the participation group, I want to do my best to help. Gratitude.

0

The image has 333x400, in the Hover it decreases 4px of each dimension that corresponds to twice the thickness of the border.

.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">

Here with edge = 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">

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.