Hover is disturbing

Question

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"><a href="#" class="color-black">Partial Covered Rigid Boxes</a></p>
    </div>
  </div>
</div>

Use `outline` instead of `border`. Border is meant to enlarge the element — Akxe, Nov 11 '21 at 15:55
or box-shadow inset will also not influence the size of an element. — tacoshy, Nov 11 '21 at 15:58

score 0 · Accepted Answer · answered Nov 11 '21 at 15:59

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"><a href="#" class="color-black">Partial Covered Rigid Boxes</a></p>
    </div>
  </div>
</div>

Hover is disturbing

1 Answers1