Event onmousenter

Navigation
1

Next to creating a site and in the gallery part I created a function to move the mouse over the image to create a margin, but the image is slightly larger. I wonder if it would be possible to keep it static?

    
asked by anonymous 06.05.2018 / 16:07

2 answers

1

This solves your problem Box-sizing , only CSS : 

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

    
06.05.2018 / 16:17
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">
<imgclass="efeito" src="https://marketingdeconteudo.com/wp-content/uploads/2017/01/giphy-7.gif">

Herewithborder=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">
    
06.05.2018 / 17:12
Variable without value pl / sql Form select with Laravel