Hover is disturbing [duplicate] - html

Question

This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 1 year ago.
When I hover on the total-contents so the picture moves from its real place and the whole content in the div moves a bit and leaves its position
.total-contents:hover .content-products {
border: 2px solid #BC463A;
}
.total-contents:hover .content-products-text {
background-color: #BC463A;
transition: all .4s ease-in-out 0s;
}
.total-contents:hover .content-products-text a {
color: #ffffff;
text-decoration: none;
}
<div class="col-md-4 total-contents">
<div class="row">
<div class="col-12 content-products m-auto">
<img class="img-fluid d-inline mx-auto product-img-height" src="{{asset('images/products/14.jpg')}}" width="80%">
</div>
<div class="col-12 text-center p-3 content-products-text">
<p class="text-capitalize m-auto">Partial Covered Rigid Boxes</p>
</div>
</div>
</div>

Answer 1

you need to account for the 2px border you are adding, you could add a transparent border whilst not hovering.
.total-contents .content-products {
border: 2px solid transparent;
}
.total-contents:hover .content-products {
border: 2px solid #BC463A;
}
.total-contents:hover .content-products-text {
background-color: #BC463A;
transition: all .4s ease-in-out 0s;
}
.total-contents:hover .content-products-text a {
color: #ffffff;
text-decoration: none;
}
<div class="col-md-4 total-contents">
<div class="row">
<div class="col-12 content-products m-auto">
<img class="img-fluid d-inline mx-auto product-img-height" src="{{asset('images/products/14.jpg')}}" width="80%">
</div>
<div class="col-12 text-center p-3 content-products-text">
<p class="text-capitalize m-auto">Partial Covered Rigid Boxes</p>
</div>
</div>
</div>